Question

我需要创建两个div，就像在图像中一样。两者都可以有背景图像。任何人都可以帮忙吗？

Answer 1

有几种方法可以做到这一点。

旧学校

一种方法是裁剪重叠的图像，使其截断三角形，并用透明度代替。这适用于任何支持.pngs的浏览器，但是，缺点是您需要创建新作物的每个图像。根据您是否完全控制图像（photoshop）或正在处理用户上传的图像（服务器端处理），上传时照片商店批处理或服务器端图像处理作业将覆盖最佳状态

<强>掩蔽

通过使用css掩码，你可以为覆盖的div创建一个掩码，强制透过覆盖的div到它下面的div。您需要一个三角形切口为黑色且其余部分为透明的图像。黑色区域是保留的区域，而div的其余部分是透明的，露出下面的div。

这里的答案给出a working example，但形状不同。

语法非常简单，您只需使用与背景图像相似的网址定义-mask-image即可。前缀是必需的，支持仍然是a bit limited。

剪辑路径

剪辑路径允许您剪辑重叠的div以让下面的div显示出来。您可以使用this tool进行设置。我从他们的输出中删除了下面的css，它在底部定义了一个三角形：

-webkit-clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
clip-path: polygon(100% 38%, 42% 100%, 100% 100%);

在此示例中，重叠div被裁剪为三角形，允许白色背景透过。再次，support is limited。

所有示例

所有示例都可以将重叠的div交换为三角形或角落截止的正方形。它对结果没有影响。

此外，在所有情况下，您都需要使用位置将两个div叠加在一起。像这样：

.container {
    position: relative;
}
.div1,
.div2 {
    position: absolute;
}