矢印を表現する方法っていくつかあるんですよね。今回はcssだけで表現してみようと思います。

HTMLを書こう

cssを書く前にまずはHTMLを記述します。

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

cssを書こう

HTMLは上記です。もちろん、HTMLタグなどは適宜脳内変換してくださいね。
HTMLが書き終わったらcssを書いていきます。

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid #202020;
  border-top: 10px solid #202020;
}

これで矢印の完成です。太い矢印にしたいときは、borderの10pxの数字を増やしてあげるだけです。

ほかの矢印

今回記載したコードはとても簡単なものです。
「手が込んだものやデザイン性のある矢印にしたい」なんて時もあるでしょう。

そんな時は、::beforeや::afterなどを使って表現する方法もあります。
実際に手を動かして実装してみてくださいね。

今日はこの辺で！