css画空心箭头

<i class="u-arrow u-arrow-left ">
</i>

.u-arrow {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
    }

    .u-arrow-up {
        transform: rotate(-45deg);
    }

    .u-arrow-down {
        transform: rotate(135deg);
    }

    .u-arrow-left {
        transform: rotate(-135deg);
    }

    .u-arrow-right {
        transform: rotate(45deg);
    }