用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;
}