纯CSS实现三角形的绘制

    .box {
      width: 0;
      height: 0;
      border-bottom: 50px solid darkviolet; 
      /*border-bottom: 50px solid transparent;*/
      border-top: 50px solid deeppink;
      border-left: 50px solid red;
      border-right: 50px solid blue;
      margin: 0 auto;
    }

我们创建一个宽高都为0的元素，给其添加border属性，可以看到效果如图所示：

我们把其中任意三个边框的颜色设置成transparent即可绘制出一个三角形

.box {
      width: 0;
      height: 0;
      border-bottom: 50px solid transparent;
      border-top: 50px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid blue;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;

此时的三角形占位实际上还是一个正方形的面积，我们为了节省面积，可不设置此三角形底边对边的border

我们还可以通过设置border的宽度以及border的颜色绘制出各种各样的三角形