css实现有边框有出口的三角形

1、html

<!--空心的三角形-->
<!--向上的三角形-->
<div class="border-up-empty">
    <span></span>
</div>
<!--向下的三角形-->
<div class="border-down-empty">
    <span></span>
</div>
<!--向左的三角形-->
<div class="border-left-empty">
    <span></span>
</div>
<!--向右的三角形-->
<div class="border-right-empty">
    <span></span>
</div>

2、css

.border-up-empty {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #333;
    position: relative;
    margin: 50px auto;
}
.border-up-empty span {
    display: block;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 28px solid pink; //如果改成白色，就是镂空的三角，两条线。
    position: absolute;
    left: -28px;
    top: 2px;
}
.border-down-empty {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #333;
    position: relative;
    margin: 50px auto;
}
.border-down-empty span {
    display: block;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 28px solid pink;
    position: absolute;
    left: -28px;
    top: -30px;
}
.border-left-empty {
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #333;
    border-top: 30px solid transparent;
    position: relative;
    margin: 50px auto;
}
.border-left-empty span {
    display: block;
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-right: 28px solid pink;
    border-top: 28px solid transparent;
    position: absolute;
    left: 2px;
    top: -28px;
}
.border-right-empty {
    width: 0;
    height: 0;
    border-left: 30px solid #333;
    border-bottom: 30px solid transparent;
    border-top: 30px solid transparent;
    position: relative;
    margin: 50px auto;
}
.border-right-empty span {
    display: block;
    width: 0;
    height: 0;
    border-left: 28px solid pink;
    border-bottom: 28px solid transparent;
    border-top: 28px solid transparent;
    position: absolute;
    left: -30px;
    top: -28px;
}

3、效果图

原理：两个三角形进行叠加，位置和颜色有区别。