如何使用CSS创建三角形剪辑蒙版

Question

我想要创建如图片所示的三角形。有人知道如何实现这个效果吗？

- Rahul Vyas

---

可能是这个CSS三角形形状是如何工作的？的重复问题。 - Beterraba

你看到我附上的图片了吗？ - Rahul Vyas

我需要透明的遮罩。 - Rahul Vyas

这并不使用CSS，但是你可以在Photoshop/Paint中编辑图像并添加三角形效果。确保使用取色器工具匹配颜色条与页眉和页脚的颜色。添加图像，然后使其完美地适合页眉和页脚之间。 - Mustafa sabir

可能是在图像上方放置透明CSS箭头 的重复问题。 - web-tiki

您只需将颜色设置为透明即可... - Beterraba

Answer 1

这里有一个可以解决你问题的代码片段。我在容器上使用了:before和:after，将两个正方形放置在具有边框的容器上，以创建箭头。您可以混合边框颜色和宽度，以获得所需的箭头（只需记住内部边框必须具有相同的粗细以制作对称三角形）。

代码片段链接：http://jsfiddle.net/56gur0x4/1/

.hero {
    background: url(http://d.pr/i/eqn9+);
    height: 200px;
    position: relative;
}

.hero:before, .hero:after {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top:0;
    display: block;
    width: 50%;
    height: 100%;
    border: 30px solid orange;
    border-bottom-color: pink;
}

.hero:before {
    left: 0;
    border-right: 20px solid transparent;
    border-left: 0;
}

.hero:after {
    right: 0;
    border-left: 20px solid transparent;
    border-right: 0;
}

- Travis L

Answer 2

使用更新的浏览器，可以使用clip-path CSS属性。这要好得多，但你需要为IE / Edge和旧版本的浏览器提供备用方案。

示例

<div class="triangle"></div>

<style>
.triangle {
  width: 400px;
  height: 400px;
  background-color: blue;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
</style>

- Scribblemacher

Answer 3

使用CSS的三角形裁剪蒙版，可以裁剪图像以显示背景。

您可以使用CSS和SVG的clip属性来实现这种遮罩效果。

HTML

 <svg width="0" height="0">
        <clipPath id="clipping1" clipPathUnits="objectBoundingBox">
            <polygon points="0 0, 0 1, 100 0,   .6 0, .5 .2, .4 0">
        </clipPath>
    </svg>
    <img class="clip-animation" alt="" src="http://c1.staticflickr.com/9/8449/7966887330_ddc8018682_h.jpg">

CSS

.clip-animation {clip-path: url(#clipping1);-webkit-clip-path: url(#clipping1);  margin:100px; width:500px;} 
    body{ background-color:#CCCCCC;}

我有一个带有图片标签的口罩，您也可以将其与div元素或任何其他标签一起使用。

在此处检查工作演示。 http://jsfiddle.net/VijayDhanvai/495rpzdb/

- Vijay Dhanvai

Answer 4

想象一下，带有照片的区域被分成两个正方形，照片作为背景。

现在想象一下，你给这些正方形非常厚的上下边框，并且颜色与照片上下的区域相对应。

现在想象一下，你还给它们每个相邻边缘一个非常厚的边框（左边的正方形有右边框，右边的正方形有左边框），但这次，你让边框透明。

你会发现，当上/下边框和侧边框相遇时，它们之间有一个对角线边缘，在那里颜色变成透明。这在相邻的角落留下了一个透明的三角形，背景可以透过它显示出来。

- Jim