如何使用CSS创建三角形形状剪辑蒙版 [英] How can I create Triangle shape clip mask using CSS

问题描述

我要创建如图所示的三角形. 有人知道如何达到效果吗?

I want to create triangle as shown in image. Does someone know how to achieve the effect?

推荐答案

这里是一个小提琴，应该可以解决您的问题.我在容器上使用了:before和:after，以便在容器上放置两个带有边框的正方形，以创建箭头.您可以弄乱边框的颜色和宽度，以使箭头如您所愿(请记住，内部边框必须具有相同的粗细才能形成对称的三角形).

Here is a fiddle that should solve your problem. I used :before and :after on a container to place two squares over the container with borders to create the arrows. You can mess with the border colors and widths to get the arrows how you want them (just remember the inside borders have to be the same weight to make an symmetrical triangle).

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

这篇关于如何使用CSS创建三角形形状剪辑蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！