用border做三角形

在实际中我们可以利用border做出纯CSS的三角形。当我们给元素设定高度、宽度和边框时。

#test{
       width:100px;
       height:100px;
       border-top:80px solid red;
       border-right:80px solid blue;
       border-bottom:80px solid yellow;
       border-left:80px solid green;
} 

　　

由图可以看出border在相交的地方是平分的。那么当元素的高度和宽度同时设置为0时

#test{
       width:0px;
       height:0px;
       border-top:80px solid red;
       border-right:80px solid blue;
       border-bottom:80px solid yellow;
       border-left:80px solid green;
} 

如果保留上边框的颜色，把其他边的边框颜色变为透明的，即可等到向下的三角形

#test{
       width:0px;
       height:0px;
       border-top:80px solid red;
       border-right:80px solid transparent;
       border-bottom:80px solid transparent;
       border-left:80px solid transparent;
} 

同理，也可以做出向上，向左，向右的三角形。

#test{
       width:0px;
       height:0px;
       border-top:80px solid transparent;
       border-right:80px solid blue;
       border-bottom:80px solid transparent;
       border-left:80px solid transparent;
} 

如果只有左边框和上边框，其他边框没有

#test{
       width:0px;
       height:0px;
       border-top:80px solid red;
       border-left:80px solid green;
} 

如果让左边框的颜色透明，那么就会得到一个等腰直角三角形

#test{
       width:0px;
       height:0px;
       border-top:80px solid red;
       border-left:80px solid transparent;
} 

如果让左边框的大小与上边框的大小不等，那么就等到直角三角形

#test{
       width:0px;
       height:0px;
       border-top:80px solid red;
       border-left:150px solid transparent;
}