Html 如何创建带有背景图像的倾斜透明形状？

我想实现这样的目标- 它有一个背景。我只能做一个像这样倾斜的跳水-

.shape{
位置：相对位置；
宽度：100%；
高度：290px；
背景：rgba（61802481）；
}
.形状：之后{
位置：绝对位置；
宽度：100%；
身高：100%；
内容：“；
背景：继承；
排名：0；
右：0；
底部：0；
左：0；
变换原点：左上角；
变换：歪斜（-4deg）；
}

在这里，我尝试了这个示例，希望它能帮助您，只需将整个代码复制到html页面中，然后查看输出…，或者查看下面的代码片段

.hero img{
-webkit剪辑路径：多边形（0,100%0,100%96,0,100%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
}
.宣传片{
-webkit剪辑路径：多边形（0,1600px 0,1600px 87%，0,100%）；
剪辑路径：多边形（0,1600px 0,1600px 87%，0,100%）；
}
.英雄{
颜色：#fff；
字体系列：“Fira Sans”，无衬线；
位置：相对位置；
文本对齐：居中；
文本阴影：0px 0px 1px rgba（0,0,0,0.5）；
}
.英雄img{
宽度：100%；
}
.英雄菲卡普顿{
左：50%；
位置：绝对位置；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.英雄h1{
字体大小：32px；
}
.英雄p{
字体大小：14px；
字体大小：300；
边缘顶部：0.5em；
}
.宣传片{
背景：url(https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg)不重复；
背景尺寸：封面；
颜色：#fff；
字体系列：“Fira Sans”，无衬线；
利润率：50px0；
溢出：隐藏；
填充：150px 20px；
位置：相对位置；
文本对齐：居中；
文本阴影：0px 0px 1px rgba（0,0,0,0.5）；
}
·宣传片h1{
字体大小：32px；
}
.宣传片{
字体大小：14px；
字体大小：300；
边缘顶部：0.5em；
}
.引用{
背景：)5；
位置：相对位置；
z指数：1；
}
.quote:之前，.quote:之后{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.引用：之前{
排名：0；
-webkit变换：歪斜（1.5度）；
变换：歪斜（1.5度）；
-webkit转换来源：100%0；
变换原点：100%0；
}
.引述：之后{
底部：0；
-webkit变换：歪斜（-1.5度）；
变换：歪斜（-1.5度）；
-webkit转换来源：100%；
变换原点：100%；
}
.引用{
颜色：#fff；
字体系列：“Fira Sans”，无衬线；
利润率：50px0；
填充：20%20px；
文本对齐：居中；
}
h1{
字体大小：32px；
字号：500；
}
.边--底{
位置：相对位置；
z指数：1；
}
.边缘--底部：之后{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.边缘--底部：之后{
底部：0；
-webkit变换：歪斜（-1.5度）；
变换：歪斜（-1.5度）；
-webkit转换来源：100%；
变换原点：100%；
}
.边缘--底部--反向{
位置：相对位置；
z指数：1；
}
.edge--底部--反转：后{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.edge--底部--反转：后{
底部：0；
-webkit变换：歪斜（1.5度）；
变换：歪斜（1.5度）；
-webkit转换来源：0 100%；
变换原点：0.100%；
}
.边缘--顶部{
位置：相对位置；
z指数：1；
}
.edge--top:之前{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.edge--top:之前{
排名：0；
-webkit变换：歪斜（1.5度）；
变换：歪斜（1.5度）；
-webkit转换来源：100%0；
变换原点：100%0；
}
.边缘--顶部--反向{
位置：相对位置；
z指数：1；
}
.边缘--顶部--反向：之前{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.边缘--顶部--反向：之前{
排名：0；
-webkit变换：歪斜（-1.5度）；
变换：歪斜（-1.5度）；
-webkit转换原点：0；
变换原点：0；
}
.边缘--两者都有{
位置：相对位置；
z指数：1；
}
.edge--两者：之前，.edge--两者：之后{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.edge--两者都是：在{
排名：0；
-webkit变换：歪斜（1.5度）；
变换：歪斜（1.5度）；
-webkit转换来源：100%0；
变换原点：100%0；
}
.边缘--两者：之后{
底部：0；
-webkit变换：歪斜（-1.5度）；
变换：歪斜（-1.5度）；
-webkit转换来源：100%；
变换原点：100%；
}
.edge--两个--反向{
位置：相对位置；
z指数：1；
}
.edge--both--reverse:before，.edge--both--reverse:after{
背景：继承；
内容：''；
显示：块；
身高：50%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
}
.edge--两个--相反：在{
排名：0；
-webkit变换：歪斜（-1.5度）；
变换：歪斜（-1.5度）；
-webkit转换原点：0；
变换原点：0；
}
.edge--两个--反向：后{
底部：0；
-webkit变换：歪斜（1.5度）；
变换：歪斜（1.5度）；
-webkit转换原点：0；
变换原点：0；
}
-贝里{
背景#b52b4a；
}
-蓝色{
背景：)5；
}
-橙色{
背景：#de6628；
}
-绿色{
背景：#5e9b42；
}
.街区{
颜色：#fff；
字体系列：“Fira Sans”，无衬线；
利润率：0.200px；
填充：20%20px；
文本对齐：居中；
}
h1{
字体大小：32px；
字号：500；
}
p{
字体大小：14px；
字体大小：300；
边缘顶部：0.5em；
}

斜边

带有CSS剪辑路径的图像

斜边

CSS背景与CSS