网页中一些小图标可以用css实现,而不是切图。
分别试了几种效果
.triangle{
width: 0px;
height: 0px;
border-left: 150px solid red;
border-right: 150px solid red;
border-bottom: 50px solid black;
}
将border-bottom改为 100px solid black;
.triangle{
width: 0px;
height: 0px;
border-top: 50px solid black;
border-left: 150px solid red;
border-right: 150px solid red;
}
.triangle{
width: 0px;
height: 0px;
border-top: 50px solid black;
border-left: 150px solid red;
}
如果只写border-top: 50px solid black;border-bottom: 150px solid red; 网页上不能显示,将border-left和border-right的边框颜色设置为transparent就可以显示了,我分别设置成了50px。
综上,我对css实现倒三角原理的理解是,因为宽高为0,所以中间没有元素,如果设置了边框,就会把所有边框挤在一起,最后的形状也会因为边框大小不同而不同。