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

【问题标题】：How can I create Triangle shape clip mask using CSS如何使用 CSS 创建三角形剪辑蒙版
【发布时间】：2018-03-08 22:43:28
【问题描述】：

我想创建如图所示的三角形。有人知道如何达到效果吗？

【问题讨论】：

How does this CSS triangle shape work? 的可能重复项
你看到我附上的图片了吗？
我需要透明蒙版
这不是使用css，但是，您可以在photoshop/paint中编辑图像并添加三角形效果。确保使用颜色选择器工具将颜色条与页眉和页脚匹配。添加图像，然后使其完全适合页眉和页脚。
Transparent CSS arrow over an image的可能重复

标签： html css geometry

【解决方案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;
}

【讨论】：

【解决方案2】：

通过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>

【讨论】：

【解决方案3】：

三角形剪辑蒙版使用 CSS 剪辑图像，使背景出现。

您可以使用带有 SVG 的 CSS 的 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/

【讨论】：

【解决方案4】：

想象有照片的区域被从中间分成两个正方形，照片作为背景。

现在假设您为这些正方形设置了非常厚的顶部和底部边框，颜色对应于照片上方和下方的区域。

现在想象一下，您还为它们的每个相邻边设置了一个非常粗的边框（左边的正方形有右边的边框，右边的正方形有左边的边框），但是这一次，您让边框透明。

您会看到，在顶部/底部边界和侧边界相交的地方，它们之间有一条对角线边缘，颜色变为透明。这会在背景透过的相邻角落留下一个透明三角形。

【讨论】：