16.2、css三角带有边框的做法

时间：2021-02-17 14:07:02 收藏：0 阅读：0

一、原理：
　　①、先做一个实心的三角：

技术图片

    <div class="box">
        <em></em>
        <span></span>
    </div>

    .box em {
        position: absolute;
        top: 30px;
        left: 20px;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left: 8px solid red;
    }

②、再做一个全白的三角，然后使用定位将两个三角叠在一起只留下一个边框。这样就形成了带边框的三角：

    .box span {
        position: absolute;
        top: 30px;
        left: 19px;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left: 8px solid #fff;
    }

　　技术图片

纯白三角将红色背景三角遮住，将成了这种效果