是否可以使用CSS从div中剪切出一个三角形部分？

可以像下图那样从

上切一个三角形吗

背景实际上不仅仅是颜色，在我的例子中是模糊的图片，所以我不能简单地用棕色三角形图像覆盖绿色

。是否有其他CSS方法可以达到这种效果？谢谢

---

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

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

---

看起来你的

上也有一点阴影，我猜三角形应该尊重这一点

CSS目前没有提供直接实现这一点的方法。一种方法是创建带有三角形切口的

绿色底部区域的图像（使用例如Photoshop），将其设置为原始

内

的背景，并将其放置在原始

外

下面是一个JS Fiddle示例，希望能解释这个想法：

---

它的幻觉是可能的：
在PC和iPad上测试：IE9、10、Firefox、Chrome、Safari

• ：:before

  和

  ：：before

  和

  ：：before

  伪元素倾斜，以提供三角形的每一侧
• 用于剪裁扭曲的伪元素的包装器。您可以通过使用外部容器作为包装来避免这种情况
• 元素仍然可以使用边框、阴影等设置样式
• 下面的任何东西都能正确地显示出来
带边框和阴影的演示：
此演示还为带有视网膜的iPad添加了一个调整，以防止元素和伪元素之间出现间隙（由阴影溢出或亚像素渲染行为引起）

测试
#包装纸{
溢出：隐藏；
高度：116px；
}
#试验{
高度：100px；
背景色：#ccc；
位置：相对位置；
}
#测试：：之前{
内容：“；
位置：绝对位置；
左：-8px；
宽度：50%；
高度：16px；
顶部：100px；
背景色：#ccc；
-webkit变换：倾斜（-40度）；
-moz变换：倾斜（-40度）；
-o变换：倾斜（-40度）；
-ms变换：倾斜（-40度）；
变换：倾斜（-40度）；
}
#测试：：之后{
内容：“；
位置：绝对位置；
右：-8px；
宽度：50%；
高度：16px；
顶部：100px；
背景色：#ccc；
-webkit变换：倾斜（40度）；
-moz变换：倾斜（40度）；
-o变换：倾斜（40度）；
-ms变换：倾斜（40度）；
变换：倾斜（40度）；
}

---

---

作为替代方案，您可以使用透明图像并使用伪元素“扩展”其上方的元素。我有一个从元素上切下的圆，并显示IE7的支持选项（以及CSS中真正剪辑/屏蔽的未来选项）。
您可以使用（）执行类似操作：
• （反三角形遮罩）
• （三角形遮罩）

---

我使用了

剪辑路径：多边形（…）

属性，但似乎只有我的Chrome支持它；您可以创建多边形图像，并使用

遮罩图像引用它们，以获得更广泛的支持。
在您的特定情况下
z-index
是一个选项吗？创建一个三角形（），将其放置在绝对位置，z-index高于背景，赢。@Joren:nope。如果你明白我的意思的话，他试图在
中创建一个三角形部分，在那里
后面的背景显示出来。@Paul D.Waite如果是这样，那么
塑造它并为它设置背景，就像在
div
@EL:当你说“
塑造它”，你是什么意思？很明显我对这个问题的解释可能不同。对不起，伙计们，这是一个很棒的解决方案！在这件事上跳出框框思考的方式。要是能把div的一边歪就好了。
<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);
}