純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/

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