border绘制三角形（原理）

1.首先我们准备4个盒子

    <div id="box"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>

2.来一个我们平时最常用的 border

    #box{
        width: 100px;
        height: 100px;
        border: 5px solid;
        border-color: red blue green black;
    }

3. 关键点来了，将 border 宽度增加, 可以发现现在的 border 是由 4 个梯形组成

      #box1{
          width: 100px;
          height: 100px;
          border: 80px solid;
          border-color: red blue green black;
      }

4. 当我们把盒子的大小设置为 0 呢, 可以发现现在的 border 是由 4 个三角组成

      #box2{
          width: 0;
          height: 0;
          border: 80px solid;
          border-color: red blue green black;
      }

5. 当我们把其他的 border 颜色设置为透明, 就能绘制出想要的三角形

      #box4{
          width: 0;
          height: 0;
          border: 80px solid;
          border-color: transparent transparent green transparent;
      }