纯CSS绘制的三角形箭头图案

div#up{

width:0px;

height:0px;

border-left:5pxsolidtransparent;

border-right:5pxsolidtransparent;

border-bottom:5pxsolid#2f2f2f;

}

div#down{

width:0px;

height:0px;

border-left:20pxsolidtransparent;

border-right:20pxsolidtransparent;

border-top:20pxsolid#f00;

}

div#left{

width:0px;

height:0px;

border-top:10pxsolidtransparent;

border-bottom:10pxsolidtransparent;

border-right:10pxsolidyellow;

}

div#right{

width:0px;

height:0px;

border-top:60pxsolidtransparent;

border-bottom:60pxsolidtransparent;

border-left:60pxsolidgreen;

}

html:

<divid="up"></div>

<divid="down"></div>

<divid="left"></div>

<divid="right"></div>