不同形状的 div

Question

我需要像图片中那样创建两个 div。两者都可以有背景图片。有人可以帮忙吗？

Two divs http://development.230i.com/tsips_new/v2/images/Untitled.png

Answer 1

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

老派

一种方法是裁剪覆盖的图像，使其有一个三角形被切掉并替换为透明度。这适用于任何支持 .png 的浏览器，但是，缺点是您需要为每个图像创建一个新的裁剪。上传时的 photo-shop 批处理或服务器端图像处理作业将涵盖这一点，具体取决于您是完全控制图像 (photoshop) 还是正在处理用户上传的图像（服务器端处理）

掩码

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

这里的答案给出了，虽然形状不同

语法非常简单，您只需定义一个 -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;
}

不同形状的 div

Different shaped divs

html

css

shape