clip-path で右向き・左向きの矢印を作るコードを、実物プレビュー付きでコピーできます。
矢印は clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%) で作れます。軸（長方形）と矢じり（三角形）を頂点で組み合わせた形です。ボタンやステップ表示に画像なしで使えます。下にコピペ用コードを用意しました。
.arrow-right {
clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%);
-webkit-clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%);
}
.arrow-left {
clip-path: polygon(40% 0, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0 50%);
-webkit-clip-path: polygon(40% 0, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0 50%);
}
20% と 80% の差で軸の太さが決まります。60% を左右にずらすと矢じりの大きさが変わります。