cssは三角形と矢印を描画します

三角形
DOMの高さと幅を0ピクセルに設定し、境界線の色を透明に設定してさまざまな三角形を描画します。もちろん、境界線の幅を設定してさまざまな角度の三角形を描画することもできます。

.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" >