如何创建此布局？ [英] How do I create this layout?

问题描述

我试图在CSS中创建这种风格。这是我在photoshop中制作的图像，我想知道它是否可以单独制作html和css？或者我必须使用图片。请帮助，这是一个学校项目。



图像可以在这里看到： 1 - imgbb.com [ ^ ]



我尝试了什么：



我已经尝试过看一下flexbox的观点，但是我我不确定是否可以使用flexbox。

Im trying to create this style in CSS. this is a image i made in photoshop and i was wondering if its even possible to make in html and css alone? or do i have to use the picture. please help, it's for a school project.

the image can be seen here: 1 — imgbb.com[^]

What I have tried:

i've already tried to look at a flexbox perspective, but i'm not sure that a flexbox is the way to procced.

推荐答案

您需要使用多个背景图像 - 一个用于图像，一个线性渐变用于纯色。

使用多种背景MDN [ ^ ]

例如：编辑小提琴 - JSFiddle [ ^ ]

You'll need to use multiple background images - one for the image, and a linear gradient for the solid colour.
Using multiple backgrounds | MDN[^]
For example: Edit fiddle - JSFiddle[^]

.fancy-image {
    box-sizing: border-box;
    width: 800px;
    height: 300px;
    background: linear-gradient(115deg, rgba(68,68,68,0) 0%,rgba(68,68,68,0) 45%,rgba(68,68,68,1) 45%,rgba(68,68,68,1) 100%), url(https://placekitten.com/800/300) top left no-repeat;
    color: white;
    padding: 80px 15px 0 390px;
}

如果你想要文字跟随倾斜的边缘，然后你需要使用CSS形状。

拿A新形式的CSS形状 - 粉碎杂志 [ ^ ]

例如：编辑小提琴 - JSFiddle [ ^ ]

If you want the text to follow the slanted edge, then you'll need to use a CSS shape.
Take A New Look At CSS Shapes — Smashing Magazine[^]
For example: Edit fiddle - JSFiddle[^]

.fancy-image {
    box-sizing: border-box;
    width: 800px;
    height: 300px;
    background: linear-gradient(115deg, rgba(68,68,68,0) 0%,rgba(68,68,68,0) 45%,rgba(68,68,68,1) 45%,rgba(68,68,68,1) 100%), url(https://placekitten.com/800/300) top left no-repeat;
    color: white;
}
.fancy-image::before {
    content: "";
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    shape-outside: linear-gradient(115deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 100%);
    shape-margin: 5px;
}

这篇关于如何创建此布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！