css制作上下左右箭头

html部分：

<div style="position: relative">
     <span class="arrow arrow-down">span>
     <span class="arrow arrow-up">span>
     <span class="arrow arrow-left">span>
     <span class="arrow arrow-right">span>
 div>

css部分：

.arrow {
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
    }

.arrow-down {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #ccc;
 }

 .arrow-up {
     border-bottom: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     top: 50px;
 }

 .arrow-left {
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-right: 5px solid #ccc;
     top: 100px;
 }

 .arrow-right {
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid #ccc;
     top: 150px;
 }