小三角图标如何用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中的颜色值。