用border-width,border-color画三角形

需要哪类三角形,比如右三角形,则border-width属性中,右边为0,在border-style中与之相反的左边呈所设定的颜色,其他边为transparent。 

1.右三角形

border- 10px 0 10px 10px;

border-color: transparent transparent transparent #fafafa;

border-style: solid;

 

2.左三角形

border- 10px 10px 10px 0;

 border-color: transparent #fafafa transparent transparent ;

 border-style: solid;

3.上三角形

border- 0 10px 10px 10px;

 border-color: transparent  transparent #fafafa transparent ;

 border-style: solid;

4.下三角形

border- 10px 10px 0 10px;

 border-color: #fafafa transparent  transparent  transparent ;

 border-style: solid;

原文地址:https://www.cnblogs.com/swii/p/5912417.html