实心箭头 
div{
width: 0;
height: 0;
border-left: 4px solid transparent;/*透明*/
border-right: 4px solid transparent;
border-bottom: 8px solid #242d3b;
}
线型箭头
.ico .spn {
width: 60rpx;
height: 60rpx;
position: relative;
}
.ico .spn:after, .ico .spn:before {
border: solid transparent;
content: ‘ ‘;
height: 0;
left: 50%;
position: absolute;
width: 0;
margin-left: -6px;
}
/* 白色的三角 */
.ico .spn:after {
border-width: 10rpx;
border-left-color: #fff;
top: 2px;
}
/* 黑色的三角 */
.ico .spn:before {
border-width: 12rpx;
border-left-color: #000;
top: 0;
}
/* 当 :after 和 :before 的样式重合以后，由于top值的大小不同，就可以得到中间是白色，但是边框的三角形 */
.ico .spn {
width: 20rpx;
height: 4rpx;
margin: 0 auto 7rpx;
border-left: 4rpx solid transparent;
border-right: 4rpx solid transparent;
border-bottom: 4rpx solid #343c99;
transform: rotate(45deg);
transform-origin: left;
}
.ico .spn:after {
position: absolute;
right: -10rpx;
top: -14rpx;
content: ”;
display: block;
width: 100%;
height: 100%;
border-left: 4rpx solid transparent;
border-right: 4rpx solid transparent;
border-top: 4rpx solid #343c99;
transform: rotate(90deg);
transform-origin: bottom;
}