如何通过CSS实现这个角度背景？

---

我怎样才能得到这样的东西？你能帮我吗？

这里有一篇文章可能会帮到你：

你可以使用多重背景混合图像+渐变：

正文{
保证金：0；
背景：线性渐变（65度，白色45%，透明45%），url(http://lorempixel.com/600/400/nature);
背景尺寸：自动，封面；
}
/*演示化妆*/
div{
高度：100vh；
宽度：50%；
显示器：flex；
}
p{
保证金：自动；
}

---

无论左边是什么

都可以通过CSS实现

其想法是有3个集团：

容器（将包含图像作为背景）

将旋转以模拟三角形的空块

一个div将包含文本

其想法是旋转空块以获得所需的角度。 为了创建“三角形”效果，我们在容器上使用

溢出：隐藏

作为遮罩（尽管旋转，您还需要使旋转的块比容器大以覆盖它）

然后定义三角形和内容块位置以及z索引以将其重叠

注意：您不必将图像作为容器块的背景。您还可以使用

img

标记进行显示，并再次使用z-index将3个块显示在彼此的顶部

.container，
.旋转块{
显示：块；
}
.集装箱{
背景：#000000；
宽度：600px；
高度：350px；
溢出：隐藏；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.旋转块{
位置：绝对位置；
zi指数：1；
宽度：100%；
最小高度：150%；
背景：#FFFFFF；
变换：旋转（-20度）；
左-40%；
前-7%；
}
.内容{
位置：相对位置；
z指数：3；
最高：35%；
左：10%；
}

Purly是用HTML和CSS制作的

svg形状，或者希望您至少尝试自己编写。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回代码并解释您尝试了什么。请尝试编辑您的链接：