CSSで左または右矢印のようなオブジェクトを作成します。
なお、上下の矢印については以下を参考にして下さい。
参考
2パターンのアプローチで作成してみようと思います。
その1
右矢印
HTML
<div class="circle-arrow"></div>CSS
上、右ボーダーに線を引いたボックス要素を時計回りに45度回転させるイメージです。
.circle-arrow {
content: "";
width: 20px;
height: 20px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
transform: rotate(45deg);
}結果
左矢印
HTML
HTMLは変わらないので割愛します。
CSS
左、下ボーダーに線を引いたボックス要素を時計回りに45度回転させるイメージです。
.circle-arrow {
content: "";
width: 20px;
height: 20px;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
}結果
最後に
特にありません。