记录css3绘制三角形

绘制三角形在开发中其实会经常用到，一般都是用png图片或者ui库的图标字体实现，如果都不用的情况可以使用css3进行实现。
绘制的原理如下：一个border是由上下左右四个小三角形组成的，它的宽度就是下边这个正方形的边长

弄清楚原理，一切就简单了。

.top {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: transparent transparent rebeccapurple
    }

    .right {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: transparent rebeccapurple transparent transparent;
    }

    .down {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: rebeccapurple transparent transparent transparent;
    }

    .left {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: transparent transparent transparent rebeccapurple;
    }
   .all {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: red gold salmon rebeccapurple;
    }