是否可以使用CSS从div中剪切三角形部分？ [英] Is it possible to cut out a triangle section from a div using CSS?

问题描述

是否可以从< div> 中剪下一个三角形，如下图所示？

Is it possible to cut a triangle from a <div> like in the picture below?

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

The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.

推荐答案

这种错觉是可能的： http： //jsfiddle.net/2hCrw/4/

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

Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.

• :: before 和 :: after

• 用于剪裁倾斜伪元素的包装器。


• 元素仍可以使用边框，阴影等进行样式设置。


• 您可以使用外部容器作为包装器来避免这种情况。

• ::before and ::after pseudo elements are skewed to provide a side of the triangle each.
• Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
• Elements can still be styled with borders, shadows, etc.
• Anything underneath will show through properly.

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

Demo with borders and drop shadow: 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);
}

---

可以使用透明图像并用伪元素扩展其上的元素。我有回答了类似问题关于从元素，并显示支持选项下至IE7（以及CSS中真正剪辑/屏蔽的未来选项）。

---

As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).

这篇关于是否可以使用CSS从div中剪切三角形部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！