三角形
将 DOM 的高和宽设置为 0 像素，通过设置边框的颜色透明来画出不同的三角形，当然也可以来设置 border 的宽度来画出不同角度的三角形

.container{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color:red transparent transparent transparent;
}

箭头
利用边框加上旋转
或者 箭头其实就是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头，再通过旋转得到指向各个方向的箭头

/**css*/
.top{
 position: absolute;
}
.top:before,.top:after{
 position: absolute;
 content: '';
 border-top: 10px transparent dashed;
 border-left: 10px transparent dashed;
 border-right: 10px transparent dashed;
 border-bottom: 10px #fff solid;
}
.top:before{
 border-bottom: 10px #0099CC solid;
}
.top:after{
 top: 1px; /*覆盖并错开1px*/
 border-bottom: 10px #fff solid;
}
// transform:rotate(90deg) 上箭头
/**html*/
<i class="top" >