在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用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下才不支持,所以可以放心使用