简述css是如何画出三角形的

将width和height设置为0，利用边框的宽度先画出一个正方形，并且给四个方位设置不同的颜色以便观察。

.b{ margin: 100px;
    width: 0px;            
    height: 0px;
    border:40px solid;
    border-color: bisque yellowgreen red darkblue;
}

可以看到以下效果图，说明边框的相交其实是倾斜的。
利用这一特点便可以画出各种各样的三角形。
比如：

.a{
    width: 0px;                        
    height: 0px;
    border: 100px solid blue;
    border-left: 100px solid transparent;      /*transparent 表示透明*/
    border-top: 100px solid transparent;
}

或者

.b{
    width: 0px;                         
    height: 0px;
    border-top: 100px solid red;
    border-left: 100px solid transparent;    /*transparent 表示透明*/
    border-right: 100px solid transparent;
}

<!-- 也可以写成 -->

.b{
    width: 0px;           
    height: 0px;
    border: 100px solid;
    border-color: red transparent transparent transparent ;
}