小三角图标如何用CSS写

时间：2015-09-11 17:20:16 阅读：126 评论：0 收藏：0 [点我收藏+]

标签：

上三角▲

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中的颜色值。

标签：

原文地址：http://www.cnblogs.com/mm2015/p/4801398.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行