【CSS】矢印の中に文字を書く方法

矢印の中に文字を書く実装方法

今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。

サンプルコード

HTML

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

疑似要素を使用するので矢印に使う要素は div タグ 1 つだけで大丈夫です。

CSS

.arrow {
  display: flex;
  position: relative;
  width: 80px;
  height: 25px;
  background: #000000;
}
.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -30%;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.arrow::before {
  content: "矢印の中に文字";
  color: white;
  font-size: 0.5rem;
  margin: auto;
}

【CSS】五角形の矢印を作成するを応用して矢印を作成しました。矢印を構成している長方形と三角形の高さが異なるので、その分を top で調整している点以外は五角形の矢印と同じです。
肝心の矢印の中の文字についてですが、疑似要素の after で矢印の三角部分を作成しているので、before を使って矢印の中に文字を書いています。文字の中央寄せですが、大元となる allow クラスに display: flex を使用し、文字を書いている before 要素に margin: auto を設定しています。