如何创建此布局？

本文介绍了如何创建此布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图在CSS中创建这种风格。这是我在photoshop中制作的图像，我想知道它是否可以单独制作html和css？或者我必须使用图片。请帮助，这是一个学校项目。 图像可以在这里看到： 1 - imgbb [ ^ ] 我尝试了什么： 我已经尝试过看一下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[^] 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(placekitten/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(placekitten/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; }