【初心者でもわかる】CSSだけで作る、端の丸い矢印(>)の作り方

どうも、7noteです。CSSのみで、角のない矢印(>)の角が丸い矢印をつくります

矢印をアイコン画像などで作ってもいいのですが、cssを使って角丸にします。

このタイプの矢印(>)のよくある作り方としては正方形の2辺をborderで作り、45度回転させるのが多いのかなと思います。
ですがこの方法では角がかくばってしまいます。

なので違う方法を使って角の丸い矢印(>)を作っていきます。

cssで角の丸い矢印(>)の作り方

index.html

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

style.css

.arrow {
  width: 200px; /* 適当な箱を作るための幅 */
  height: 80px; /* 適当な箱を作るための高さ */
  border: 1px solid #000; /* わかりやすいように線を引く */
  position: relative; /* 基準位置とする */
}

.arrow::before,
.arrow::after {
  content: ""; /* 疑似要素に指定必須 */
  width: 20px; /* 線の長さを指定 */
  height: 3px; /* 線の幅を指定 */
  display: inline-block; /* インラインブロックにする */
  border-radius: 2px; /* 線を角丸にする */
  background: #aaa;   /* 線の色を指定 */
  position: absolute; /* 相対位置に指定 */
  right: 10px; /* 右から10pxの位置に配置 */
}

.arrow::before {
  top: calc(50% - 8px);     /* 数値は微調整してください */
  transform: rotate(45deg); /* 45度回転させる */
}
.arrow::after {
  bottom: calc(50% - 8px);   /* 数値は微調整してください */
  transform: rotate(-45deg); /* -45度回転させる */
}

解説

擬似要素のbeforeとafterの両方を使って作ります。
イメージとしては、二本の細長い棒を角丸にしてそれぞれ回転させて配置し、矢印の形にしています。
topとbottomのcalcの値を調整してきれいに重なる箇所を探してください。

まとめ

もちろんCSSを使わずに画像にすれば角丸の矢印は簡単に作成できます。
もしくはアイコンフォントで作成する方法もあります。
さらにはSVGを使った方法なんかもあります。

・アイコンフォント → https://ionicons.com/

画像と比べると読み込み速度や、管理の面でいうとCSSでかけた方がメリットが大きいのでこの書き方も覚えておいて損はないと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ