用css画出上下左右箭头
Css3横行的时代,可以帮我们实现很多功能,咱们网站导航的小箭头就是这样画出来的,记录一下,以备后用。
先来看一下效果图吧:
Css
i { /* 用border值来控制箭头粗细 */ border: 3px solid black; /* 上、右、下、左 四个边框的宽度 */ border-width: 0px 1px 1px 0px; display: inline-block; /* padding值控制箭头大小 */ padding: 5px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
Html
<p>右箭头</i>: <i class="right"></i></p> <p>左箭头: <i class="left"></i></p> <p>上箭头: <i class="up"></i></p> <p>下箭头: <i class="down"></i></p>
本文转载自:小付学代码,如侵权请联系我们删除。