Question

是否可以从下面的图片<div>中剪切三角形？

背景实际上不仅仅是颜色，但在我的情况下是模糊的图片，所以我不能简单地用棕色三角形图像覆盖绿色<div>。是否有其他一些CSS方法来实现这种效果？感谢。

example of div cut

Answer 1

它的幻觉是可能的：http://jsfiddle.net/2hCrw/4/

在PC和iPad上测试：IE 9,10，Firefox，Chrome，Safari。

::before和::after伪元素倾斜以提供三角形的一面。
用于剪切偏斜伪元素的包装器。您可以通过使用外部容器作为包装器来避免这种情况。
元素仍然可以使用边框，阴影等进行样式设置。
下面的任何内容都会正确显示。

带边框和投影的演示：http://jsfiddle.net/2hCrw/8/

_{此演示还为iPad添加了一个带Retina的调整，以防止元素和伪元素之间出现间隙（由投影出血或子像素渲染行为引起）。}

<div id="wrapper">
    <div id="test">test</div>
</div>


#wrapper {
    overflow: hidden;
    height: 116px;
}
#test {
    height: 100px;
    background-color: #ccc;
    position: relative;
}
#test::before {
    content:"";
    position: absolute;
    left: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}
#test::after {
    content:"";
    position: absolute;
    right: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}

作为替代方案，您可以使用透明图像并使用伪元素“扩展”其上方的元素。我有answered a similar question关于从元素切割的圆圈并显示支持选项到IE7（以及CSS中真正剪切/屏蔽的未来选项）。

Answer 2

您可以使用CSS masks（examples）执行此类操作：

http://codepen.io/anon/pen/vgbEH（反三角面具）
http://codepen.io/anon/pen/pEufn（三角面具）

我使用了clip-path: polygon(…)属性，但只有我的Chrome似乎支持它;您可以改为创建多边形图像并使用mask-image引用它们以获得更广泛的支持。

Answer 3

无法从css中的div中剪切，但可以使用覆盖div的图像使其看起来像被剪切。

.triangle{
    background-image: url('cut.png');
    width: 24px; height: 24px;
    z-index: 1;
    position: absolute; top: 32px; left: 15px;
}

Answer 4

看起来你的<div>上还有一点阴影，我猜三角应该尊重。

CSS目前没有提供直接实现此目的的方法。一种方法是创建<div>绿色底部区域的图像，其中带有三角形切口（使用例如Photoshop），将其设置为原始<div>的背景{ {1}}，并将其置于原始<div>之外。

这是一个JS小提琴示例，希望能够解释这个想法：

http://jsfiddle.net/7y6nz/

是否可以使用CSS从div中删除三角形部分？

4 个答案: