如何用纯css3创建三角形

css代码如下：

<style>
    .trangle{
    width: 0;
    height:0;
    border-bottom: 150px solid rebeccapurple;
    border-top: 150px solid rgb(9, 162, 233);
    border-left: 150px solid rgb(240, 10, 98);
    border-right: 150px solid rgb(9, 233, 76);
  }
  </style>


html代码:

<div class="trangle">

  </div>

效果如下：

 若是只创建一个三角形，则对于其他的边框设置透明颜色即可，这里要注意  :在使用透明属性“transparent”时需要将颜色这个属性值去掉，不然是出不来下效果的。

 效果如下：     

 

为什么设置边框能出现三角形的效果：利用的是边框和边框之间斜切的特点。