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

Question

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

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

Answer 1

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

经过测试:IE 9,10,Firefox,Chrome,PC和iPad上的Safari.

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

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

_{此演示还为带有Retina的iPad添加了一个调整,以防止元素和伪元素之间的间隙(由投影阴影或子像素渲染行为引起).}

<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);
}

作为替代方案,您可以使用透明图像并使用伪元素"扩展"其上方的元素.我已经回答了一个关于从元素切割圆圈的类似问题,并向IE7显示支持选项(以及CSS中真正剪切/屏蔽的未来选项).

Answer 2

您可以使用CSS掩码(示例)执行此类操作:

• http://codepen.io/anon/pen/vgbEH(反三角面具)
• http://codepen.io/anon/pen/pEufn(三角面具)

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