Css实现倒三角图标

网页中一些小图标可以用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，所以中间没有元素，如果设置了边框，就会把所有边框挤在一起，最后的形状也会因为边框大小不同而不同。