前端css实现上下箭头解决方案

<div class="top"></div>

css实现上箭头

.top {
    width: 0;   
    height: 0;  
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #217AFF;
}

css实现下箭头

.top {
    width: 0;   
    height: 0;  
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #217AFF;
}