Html 在DIV上叠加梯形形状

尝试使用CSS获得此设计

各部分如下：

具有

背景图像

是一个带有透明背景的梯形，背景为水平文本

我看了一下，但还是有点困惑

CSS不是一个优点

---

有什么建议吗？

正如@markE提到的，实现这一点的一个好方法是使用

skew

在平行四边形

div

中使用

position:relative

和

position:absolute

以实现叠加效果（使用

background

属性中的

rgba

）

注意：这是一个平行四边形，而不是梯形-这可能有助于您在未来的搜索

*，
*：：之前，
*：：之后{
框大小：边框框
}
身体{
保证金：0
}
.包裹{
位置：相对位置；
边框：5px纯黑；
高度：500px；
宽度：100%；
背景：url（“//lorempixel.com/1200/600”）
}
.平行四边形{
位置：绝对位置；
右：0px；
顶部：100px；
宽度：350px；
高度：250px；
背景：rgba（255,255,255,5）；
边框：纯黑；
边框宽度：5px 0 5px 5px；
变换：倾斜（0，-15度）；
}
跨度{
显示：块；
变换：倾斜（0,15度）；
利润率：70像素30像素0；
}

标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1

有点像一个倾斜的div`#theDiv{border:3px纯黑；transform:skew（0，-10deg）；}，span text绝对位于#theDiv上。看看这个网站：它使用了一个非常快速的演示，只使用了两个元素：