17

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

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

div 剪切示例

4

4 回答 4

21

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

测试：IE 9、10、Firefox、Chrome、Safari 在 PC 和 iPad 上。

  • ::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 中真正剪切/屏蔽的选项）。

于 2013-10-06T22:05:59.117 回答
6

您可以使用CSS 掩码（示例）执行以下操作：

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

于 2013-10-06T22:38:12.237 回答
1

无法从 css 中的 div 中剪切，但可以使用覆盖 div 的图像使其看起来像已剪切。

.triangle{
    background-image: url('cut.png');
    width: 24px; height: 24px;
    z-index: 1;
    position: absolute; top: 32px; left: 15px;
}
于 2013-10-06T21:44:07.477 回答
1

看起来你的身上也有一点阴影<div>，我猜三角形应该尊重这一点。

CSS 目前没有提供直接实现这一点的方法。一种方法是创建一个绿色底部区域的图像，并在<div>其中切出三角形（使用例如 Photoshop），将其设置为<div>原始内部的背景，并将其放置在原始<div>外部<div>。

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

于 2013-10-06T21:58:40.303 回答