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

Question

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

Answer 1

这是一个应该解决你的问题的小提琴。我使用：before和：after在一个容器上，在带有边框的容器上放置两个方块以创建箭头。你可以搞乱边框的颜色和宽度，以获得你想要的箭头（只需记住内部边框必须是相同的重量，以形成一个对称的三角形）。

http://jsfiddle.net/Smzmn/

.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;
}

Answer 2

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

你可以使用CSS与SVG的剪辑属性实现这种掩蔽。

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/

Answer 3

想象一下，带照片的区域从中间分割成两个正方形，背景为照片。

现在想象一下，这些正方形的顶部和底部边框非常厚，颜色与照片上方和下方的区域相对应。

现在想象你也为它们的每个相邻边给它们一个非常厚的边框（左边的边框有一个右边框，右边的边框有一个左边框），但这次，你使边框透明。

您将看到顶部/底部边框和侧边相交的位置，它们之间有一条对角线边缘，颜色变为透明。这会在背景显示的相邻角落留下透明的三角形。

Answer 4

使用newer browsers，您可以使用clip-path CSS属性。这不那么hacky，但是你需要为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>