纯CSS绘制的三角形箭头图案【原创】

         

参考：http://www.webhek.com/css-triangles/

使用上下左右的三角形箭头标志，直接用css即可完成，直接附上代码。

css:

div#up {

width: 0px;

height: 0px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid#2f2f2f;

}

div#down {

width: 0px;

height: 0px;

border-left: 20px solid transparent;

border-right: 20px solidtransparent;

border-top: 20px solid #f00;

}

div#left {

width: 0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solidyellow;

}

div#right {

width: 0px;

height: 0px;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

html：

<div id="up"></div>

<div id="down"></div>

<div id="left"></div>

<div id="right"></div>

效果图：

　　　　

 

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------