小三角图标如何用CSS写

上三角▲

 

 

1 width: 0;

2 height: 0;

3 line-height: 0;

4 font-size: 0;

5 border-width: 10px;

6 border-style: solid;

7 border-color: transparent transparent #000 transparent;

 

 

下三角▼

 

 

1 width: 0;

2 height: 0;

3 line-height: 0;

4 font-size: 0;

5 border-width: 10px;

6 border-style: solid;

7 border-color: #000 transparent transparent transparent;

 

 

左三角

 

 

1 width: 0;

2 height: 0;

3 line-height: 0;

4 font-size: 0;

5 border-width: 10px;

6 border-style: dashed solid dashed dashed;

7 border-color: transparent #000 transparent transparent;

 

 

右三角

 

 

1 width: 0;

2 height: 0;

3 line-height: 0;

4 font-size: 0;

5 border-width: 10px;

6 border-style: dashed dashed dashed solid;

7 border-color: transparent transparent transparent #000 ;

 

 

三角若需要定位自己添加position

 

三角的大小更改border-width，颜色更改border-color中的颜色值。