用css实现空心三角形

用css实现空心三角形

1.html代码

<div class="triangle-kongxin"></div>

2.css代码

.triangle-kongxin {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.triangle-kongxin:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #fff;
    position: absolute;
    top: 6px;
    left: -40px;
}

3.实现思路

• 使用了伪元素after用于创建白色的三角形上部分从而形成空心的效果