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

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

 

 

转载于:https://www.cnblogs.com/qiongmiaoer/p/3706286.html