css3 箭頭 上下左右

        .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>