纯css实现三角形(带边数控制)

效果图：

思路：

由于三角形本身就是通过border来实现的，所以就不能再对它设置边框了。
(下方两张图为例)我们画一个粉色三角形，通过z-index和定位遮住金色三角形，这样就实现了带边的三角了。
具体颜色可根据使用场景调整。

主要代码：

css

// 用before的三角形 遮住 after的三角形 留2px作为三角边
// 修改border-top或bottom 改变三角行上下方向

// 金色三角形
&:after {
    position: absolute;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-top: 20px solid #FBCD87;
    border-left: 17.5px solid transparent;
    border-right: 17.5px solid transparent;
    display: block;
    content:'';
    z-index:1
}

// 粉色三角形
&:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;  // 这样三角行的两条边宽度就是2px
    width: 0;
    height: 0;
    margin: 0 auto;
    border-top: 20px solid rgb(41, 35, 41);
    border-left: 17.5px solid transparent;
    border-right: 17.5px solid transparent;
    display: block;
    content:'';
    z-index: 2;
}

总结

本文是2条边的例子，如果你想显示3条边或者1条边，就通过设置z-index在上层三角形的大小和定位，来控制边数。