CSS绘制三角形

CSS绘制三角形其实非常简单，主要是利用正方形的四条边框来实现不同方向的三角形，可以修改边框宽度改变三角形的大小，也可以修改不同的边长实现不同形状的三角形。

• 现在有如下图所示带边框的正方形，为了方便观察，四条边分别用了不同的颜色，我们发现每条边是斜着等分的，此时我们将正方形的宽高设置为0，是不是就一目了然了。

• 接下来就简单了，我们根据需要的方向只保留一条边的背景色，设置另外三条边为透明背景，具体实现如下：

• triangle-top

  .triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: cornflowerblue;
    }

• triangle-right

  .triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left-color: darkgreen;
    }

• triangle-bottom

  .triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top-color: burlywood;
    }

• triangle-left

  .triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-right-color: aquamarine;
    }

• triangle-right-top

  .triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top-color: burlywood;
      border-right-color: aquamarine;
    }

• triangle-right-bottom

  .triangle {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right-color: aquamarine;
    border-bottom-color: cornflowerblue;
  }

• triangle-left-bottom

  .triangle {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: cornflowerblue;
    border-left-color: darkgreen;
  }

• triangle-left-top

  .triangle {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: burlywood;
    border-left-color: darkgreen;
  }