首页 > 代码库 > 用border-width,border-color画三角形

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

需要哪类三角形,比如右三角形,则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;

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