用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>
本文转载自：小付学代码，如侵权请联系我们删除。
