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

Posted 2020-08-11

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

1.右三角形

border-width: 10px 0 10px 10px;

border-color: transparent transparent transparent #fafafa;

border-style: solid;

 

2.左三角形

border-width: 10px 10px 10px 0;

 border-color: transparent #fafafa transparent transparent ;

 border-style: solid;

3.上三角形

border-width: 0 10px 10px 10px;

 border-color: transparent  transparent #fafafa transparent ;

 border-style: solid;

4.下三角形

border-width: 10px 10px 0 10px;

 border-color: #fafafa transparent  transparent  transparent ;

 border-style: solid;