css - 是否可以使用CSS从div中切出三 Angular 形部分？

是否可以从<div>切出三角形，如下图所示？

背景实际上不仅是彩色的，而且在我的情况下是模糊的图片，因此我不能简单地用棕色的三角形图像覆盖绿色的<div>。还有其他CSS方法可以达到这种效果吗？谢谢。

最佳答案

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

经过测试：PC和iPad上的IE 9、10，Firefox，Chrome，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);
}

另外，您可以使用透明图像，并使用伪元素“扩展”其上方的元素。我有一个关于从元素切出的圆的answered a similar question的信息，并显示了支持IE7的选项（以及CSS中真正的剪切/遮罩的将来选项）。

关于css - 是否可以使用CSS从div中切出三 Angular 形部分？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39033186/