纯css实现三角形

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


向上的三角形

 

向右的三角形

 

向下的三角形

 

向左的三角形

 

实现它们的css分别是:

 .top{
width:;
height:;
border-color: transparent transparent #333 transparent;
border-width: 6px;
border-style: solid;
}
 .right {
width:;
height:;
border-color: transparent transparent transparent #333;
border-width: 6px;
border-style: solid;
}
 .down {
width:;
height:;
border-color: #333 transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
 .left {
width:;
height:;
border-color: transparent #333 transparent transparent;
border-width: 6px;
border-style: solid;
}

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

上一篇:为什么使用 Redis 及其产品定位


下一篇:【BZOJ2330】【SDOI2012】糖果(差分约束,SPFA)