我需要创建两个像图像中的 div。两者都可以有背景图像。有谁可以帮忙？
Two divs http://development.230i.com/tsips_new/v2/images/Untitled.png
【问题讨论】：
有几种方法可以做到这一点。
老派
一种方法是裁剪叠加的图像，使其三角形被截断并替换为透明度。这适用于任何支持 .pngs 的浏览器，但是，缺点是您需要为每个图像创建一个新的裁剪。上传时的 photo-shop 批处理或服务器端图像处理作业将最好地涵盖这一点，具体取决于您是否完全控制图像（photoshop）或正在处理用户上传的图像（服务器端处理）
屏蔽
通过使用 css 掩码，您可以为覆盖的 div 创建一个掩码，强制通过覆盖的 div 到其下方的 div 透明。您需要一个三角形切口为黑色而其余部分透明的图像。黑色区域是保留的区域，而 div 的其余部分是透明的，露出下面的 div。
这里的答案是a working example，虽然形状不同。
语法很简单，你只需定义一个-mask-image 和一个像背景图片一样工作的url。前缀是必需的，支持仍然是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。
More about clip-path and masking.
所有示例
所有示例都可以将覆盖的 div 交换为三角形或切掉角的正方形。对结果没有影响。
此外，在所有情况下，您都需要使用 position 将两个 div 完全重叠在一起。像这样：
.container {
position: relative;
}
.div1,
.div2 {
position: absolute;
}
【讨论】：