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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • cssだけで矢印を作る方法が知りたい
  • 画像を使わずに矢印を実装できるようになりたい
  • くの字型のシンプルな矢印をcssだけで作れるようになりたい

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

この記事で紹介する「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);
}

くの字型矢印のサンプル【CodePen】

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

英語例文:くの字編

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

①くの字のように曲がった形
a sharply bent shape

②祖母は老齢で腰がくの字に曲がっている
Grandmother is bent double with age.

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

面白い!!

参考 くの字に関連した英語例文weblio

まとめ

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

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

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

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

CSSだけで細い矢印を作る方法【下向き矢印・右向き矢印】CSSだけで細い矢印を作る方法【下向き矢印・右向き矢印】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です