CSS画三角形

画三角形的思路和画梯形相同，不同的是画三角形，height和width需要置成0px

先利用border画四个三角形

代码如下：

<div class="box"></div>


.box{
            width: 0px;
            height: 0px;
            border-top: 80px solid orange;
            border-left: 80px solid green;
            border-right: 80px solid gray;
            border-bottom: 80px solid brown;    
        }

效果如下：

 

 将另外三个置成透明三角形，代码如下：

.box{
            width: 0px;
            height: 0px;
            /* border-top: 80px transparent orange solid; */
            border-left: 80px solid  transparent;
            border-right: 80px solid  transparent;
            border-bottom: 80px solid brown ;    
        }

效果如下：