CSSだけでくの字型の矢印を作る方法【上下左右全ての向きに対応】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

この記事で紹介する「borderプロパティとtransformプロパティを使って矢印を作る方法」を実践すれば、上下左右全ての向きに対応した「くの字型矢印」を実装できるようになります！

Webサイトでよく使われているUIですので、cssのスキルアップにもつながります！

それでは見て参りましょう〜！

MEMO

先に完成形のサンプルを見たい方は目次の「くの字型矢印のサンプル」をクリックしてください。

くの字型矢印の作り方【右向き】

最もシンプルな「くの字型矢印」右向きバージョンのHTMLとCSSはこちら。

index.html

<div class="Arrow-Right"></div>

index.css

.Arrow-Right {
  border-top: solid 4px #5bc8ac;
  border-right: solid 4px #5bc8ac;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}

左向きバージョンはこちら。

index.html

<div class="Arrow-Left"></div>

index.css

.Arrow-Left {
  border-bottom: solid 4px #5bc8ac;
  border-left: solid 4px #5bc8ac;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}

上向きバージョンはこちら。

index.html

<div class="Arrow-Top"></div>

index.css

.Arrow-Top {
  border-top: solid 4px #5bc8ac;
  border-left: solid 4px #5bc8ac;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}

下向きバージョンはこちら。

index.html

<div class="Arrow-Bottom"></div>

index.css

.Arrow-Bottom {
  border-bottom: solid 4px #5bc8ac;
  border-right: solid 4px #5bc8ac;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}

See the Pen
MWwVzmV by 石森裕也 (@yuyaphotograph)
on CodePen.

CSSだけでくの字型矢印を作る方法が分かったところで、
ついでにくの字を使った英語例文も覗いてみましょう〜！

①くの字のように曲がった形
a sharply bent shape
②祖母は老齢で腰がくの字に曲がっている
Grandmother is bent double with age.

bentには「折れ曲がった」という意味があり、doubleには「2つに折った」という意味があることから、2つ合わせてくの字を表現しているんですね！

面白い！！

以上、画像を使わずCSSだけで「くの字型矢印」を実装する方法を紹介しました。

CSSで作るとサイズの変更や色の変更といった微調整がしやすくなるので便利ですね！

「かっこいいWebサイトでよく見かける細い矢印を作りたいのです！」

という方は続けて以下の記事をチェックしてみてみましょう〜！