是否可以使用CSS从div中切出三角形部分?

前端之家收集整理的这篇文章主要介绍了是否可以使用CSS从div中切出三角形部分?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
可以从< div>中剪切三角形如下图所示?

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

解决方法

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

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

> :: before和::伪元素歪斜以提供三角形的一面.
>用于裁剪偏斜的伪元素的包装器.您可以通过使用外部容器作为包装来避免这种情况.
>元素仍然可以用边框,阴影等设计.
>下面的任何东西都会正常显示.

演示与边界和阴影: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中真正的剪切/屏蔽).

猜你在找的CSS相关文章