纯css实现上下左右箭头

啥都不说直接上代码

html：

<div>

<span class="arrow-bottom"></span>

<span class="arrow-up"></span>

<span class="arrow-left"></span>

<span class="arrow-right"></span>

</div>

css代码：

.box{

height:180px;

width:320px;

position:relative;

}

.arrow-bottom{

font-size:0;

line-height:0;

border-width:10px;

border-color:#2a4f6c;

border-top-width:0;

border-style:dashed;

border-bottom-style:solid;

border-left-color:transparent;

border-right-color:transparent;

position:absolute;

right:80px;

bottom:0;

}

.arrow-up{

font-size:0;

line-height:0;

border-width:10px;

border-color:#2a4f6c;

border-bottom-width:0;

border-style:dashed;

border-top-style:solid;

border-left-color:transparent;

border-right-color:transparent;

position:absolute;

right:80px;

top:0;

}

.arrow-left{

position:absolute;

right:0px;

top:80;

border:10pxsolid#fff;

border-left-color:#2a4f6c;

width:0;

height:0;

}

.arrow-right{

position:absolute;

left:0px;

top:80;

border:10pxsolid#fff;

border-right-color:#2a4f6c;

width:0;

height:0;

}

效果图：