纯css实现三角形

在设计界面的时候，通常需要三角形的图标，一般做法是用图片，其实也可以使用css来实现。如下：

---

向上的三角形

 

向右的三角形

 

向下的三角形

 

向左的三角形

 

实现它们的css分别是：

1 .top{

2     width: 0;

3     height: 0;

4     border-color: transparent transparent #333 transparent;

5     border-width: 6px;

6     border-style: solid;

7 }

1 .right {

2     width: 0;

3     height: 0;

4     border-color: transparent transparent transparent #333;

5     border-width: 6px;

6     border-style: solid;

7 }

1 .down {

2     width: 0;

3     height: 0;

4     border-color: #333 transparent transparent transparent;

5     border-width: 6px;

6     border-style: solid;

7 }

1 .left {

2     width: 0;

3     height: 0;

4     border-color: transparent #333 transparent transparent;

5     border-width: 6px;

6     border-style: solid;

7 }

其中用到的border-color：transparent是只有在奇葩的IE6下才不支持，所以可以放心使用