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

效果图:

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

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

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

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

 

上一篇:Redis 队列操作


下一篇:C#.net时间戳转换