css画一个简单的三角形

要得到一个三角形，我们需要一个简单的盒子

<div></div>

css画三角形是利用盒子的边框属性，为了方便观察先设置了居中，然后设置盒子的宽高为0给边框属性就可以了，给盒子的边框设置相同的宽度再分别给出不同的颜色，这样就得到了四个不同颜色的等腰直角三角形

div {
    width: 0;
    height: 0;
    margin: auto;
    border-top: 200px solid red;
    border-right: 200px solid gold;
    border-bottom: 200px solid green;
    border-left: 200px solid blue;
}

也可以修改不同方向的宽度得到其它类型的三角形，需要哪个方向的三角形就把其它三个方向的颜色设置透明色就可以了，这里只设置了border-top的颜色所以的到了一个倒三角

div {
      width: 0;
      height: 0;
      margin: auto;
      border-top: 200px solid red;
      border-right: 200px solid transparent;
      border-bottom: 200px solid transparent;
      border-left: 200px solid transparent;
     }

如果想得到其它类型的三角形，可以通过改变其它边的边框宽度来实现，下面把右边框设置为0得到了下图

div {
       width: 0;
       height: 0;
       margin: auto;
       border-top: 200px solid red;
       border-right: 0px solid transparent;
       border-bottom: 200px solid orange;
       border-left: 400px solid green;
   }

上边框跟左边框设置为透明色就得到了一个橙色的直角三角形

div {
       width: 0;
       height: 0;
       margin: auto;
       border-top: 200px solid transparent;
       border-right: 0px solid transparent;
       border-bottom: 200px solid orange;
       border-left: 400px solid transparent;
   }