html - 如何使用 CSS 创建三 Angular 形剪辑蒙版

Question

我想创建如图所示的三 Angular 形。有大佬知道怎么实现吗？

Answer 1

这是一个可以解决您问题的 fiddle 。我在容器上使用 :before 和 :after 在容器上放置两个带有边框的正方形以创建箭头。您可以随意调整边框颜色和宽度以获得您想要的箭头(请记住内部边框必须具有相同的粗细才能形成对称三 Angular 形)。

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