CSS写上下左右箭头

CSS部分:
.arrow_up {
border-color: transparent transparent #6EAFD5;
border-style: dashed dashed solid;
border-width: 0 4px 4px;
display: inline-block;
font-size: 0;
height: 0;
line-height: 0;
margin: 0 0 0 3px;
vertical-align: middle;
width: 0;}
.arrow_down{
border-color: #9ABBC8 transparent transparent;
border-style: solid dashed dashed;
border-width: 4px 4px 0;
display: inline-block;
font-size: 0;
height: 0;
line-height: 0;
margin: 0 0 0 3px;
vertical-align: middle;
width: 0;
}
.arrow_right{
border-color:transparent transparent transparent #9ABBC8;
border-style:dashed dashed dashed solid;
border-width: 4px 0 4px 4px;
display: inline-block;
font-size: 0;
height: 0;
line-height: 0;
margin: 0 0 0 3px;
vertical-align: middle;
width: 0;
}
.arrow_left{
border-color:transparent #9ABBC8 transparent transparent;
border-style:dashed solid dashed dashed;
border-width: 4px 4px 4px 0px;
display: inline-block;
font-size: 0;
height: 0;
line-height: 0;
margin: 0 0 0 3px;
vertical-align: middle;
width: 0;
}


body部分:
<span class="arrow_up"></span>
<span class="arrow_down"></span>
<span class="arrow_right"></span>
<span class="arrow_left"></span>