CSSでくの字型の矢印を作る方法

CSSでくの字型の矢印を作る方法を紹介します。

画像を使用して表現してもいいのですが、CSSを使用することにより少しだけ軽くすることができます。

単体で見ると本当に雀の涙程度ですが、塵も積もればというやつですね。最近はスマホでネットを見る人のほうが多いので、サイトの容量は少しでも軽くしたいところです。

また、あとから色やサイズの調整が必要になった際も、CSSを少しいじるだけで簡単に修正することができるというメリットもあります。

上向きのくの字型の矢印を作る方法

上向きのくの字型の矢印は、主にトップへ戻るボタンなど、ページの上部へ移動するアンカーリンクによく使用します。

CSS

.arrow-1 {
  width: 10px;
  height: 10px;
  border-top: solid 4px #1e90ff;
  border-left: solid 4px #1e90ff;
  transform: rotate(45deg);
}

HTML

<div class="arrow-1"></div>

下向きのくの字型の矢印は、アコーディオンメニューや、ページの下部へ移動するアンカーリンクなどによく使用します。

下向きのくの字型の矢印を作る方法

CSS

.arrow-2 {
  width: 10px;
  height: 10px;
  border-bottom: solid 4px #1e90ff;
  border-right: solid 4px #1e90ff;
  transform: rotate(45deg);
}

HTML

<div class="arrow-2"></div>

右向きのくの字型の矢印を作る方法

右向きのくの字型の矢印は、テキストの左側に表示するアイコン等に使えます。
また、リンクの右側に表示することにより、リンクであることを強調することもできます。

他にもページを進むボタンやリンク等にも使えるので、割と使い勝手が良いです。

CSS

.arrow-3 {
  width: 10px;
  height: 10px;
  border-top: solid 4px #1e90ff;
  border-right: solid 4px #1e90ff;
  transform: rotate(45deg);
}

HTML

<div class="arrow-3"></div>

左向きのくの字型の矢印を作る方法

左向きのくの字型の矢印はページを戻るボタンやリンク等に使えます。
個人的には右向きのほうが用途が多い印象です。

CSS

.arrow-4 {
  width: 10px;
  height: 10px;
  margin-top: 40px;
  border-bottom: solid 4px #1e90ff;
  border-left: solid 4px #1e90ff;
  transform: rotate(45deg);
}

HTML

<div class="arrow-4"></div>

おわりに

今回紹介したCSSでくの字型の矢印を作る方法は、Web制作の現場でも比較的よく使用するテクニックなので、覚えておいて損はないと思います。

コピペで簡単に実装できるので、ぜひ試してみてください。