css app 返回箭头,css 向左向下箭头

向左箭头

css

span.arrow-down {

border-right: 2px solid #000000;

border-top: 2px solid #000000;

height: 10px;

width: 10px;

transform: rotate(-135deg);

-webkit-transform: rotate(-135deg);

border-left: 2px solid transparent;

border-bottom: 2px solid transparent;

display: inline-block;

-moz-transform: rotate(-135deg);

-ms-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

}

使用

返回

效果图

当然，其他任意方向也是可以的，只需要控制旋转角度rotate即可。原理是构造了一个正方形，隐藏了其中的两条边left和bottom，然后进行旋转。

向下箭头

css

span.arrow-down {

border-left: 2px solid #000000;

border-bottom: 2px solid #000000;

height: 10px;

width: 10px;

transform: translate(2px, -2px) rotate(-45deg);

-webkit-transform: translate(2px, -2px) rotate(-45deg);

border-right: 2px solid transparent;

border-top: 2px solid transparent;

display: inline-block;

-moz-transform: translate(2px, -2px) rotate(-45deg);

-ms-transform: translate(2px, -2px) rotate(-45deg);

-o-transform: translate(2px, -2px) rotate(-45deg);

}

通过使用正方形左下两条边，并向下向右平移，再旋转，得到一个向下并居中的箭头

全部

效果图