用css画出上下左右箭头

Css3横行的时代,可以帮我们实现很多功能,咱们网站导航的小箭头就是这样画出来的,记录一下,以备后用。

先来看一下效果图吧:

WeChatbfa1940b6eb6f62ff35d6ac14736a6e3.jpg

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>


本文转载自:小付学代码,如侵权请联系我们删除。

联系我们

加入QQ群:点击这里加入QQ群

邮件:g8hh@qq.com

欢迎关注公众号:Git游戏