CSS 绘制三角形

1. 两种 CSS 三角形画法

【1】选取一条底边，另外两边作为腰：

    .box1 {
      width: 0;
      height: 0;
      border-left: 40px solid blue;
      border-right: 60px solid mediumspringgreen;
      border-bottom: 100px solid red;
    }

 

【2】正方形对半分：

    .box2 {
      width: 0;
      height: 0;
      /*border-left: 100px solid blue;*/
      /*border-top: 100px solid transparent;*/
      border-bottom: 100px solid pink;
      border-right: 100px solid transparent;
    }

注释部分和目前这部分效果相同：