.u-icon-arr
{
position: absolute;
top: 50%;
right: 15px;
width: 12px;
height: 12px;
border-style: solid;
border-width: 1px 1px 0 0;
border-color: #ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;
}
/*箭头朝底 down*/
.u-icon-arrD
{
-webkit-transform: rotateZ(135deg);
}
/*箭头朝上 up*/
.u-icon-arrU
{
-webkit-transform: rotateZ(-45deg);
}
/*箭头朝左 up*/
.u-icon-arrL
{
-webkit-transform: rotateZ(225deg);
}
HTML
<!--箭头-->
<p style="position: relative;top:0;">
<span class="u-icon-arr"></span>
</p>
<p style="position: relative; top: 40px;">
<span class="u-icon-arr u-icon-arrD"></span>
</p>
<p style="position: relative;top: 70px;">
<span class="u-icon-arr u-icon-arrU"></span>
</p>
<p style="position: relative;top: 100px;">
<span class="u-icon-arr u-icon-arrL"></span>
</p>