纯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下才支持,所以可以放心使用

纯css实现三角形,布布扣,bubuko.com

纯css实现三角形

上一篇:ZOJ 1002 Fire Net


下一篇:web知识