【CSS】五角形の矢印を作成する

CSSで五角形の矢印を作成する方法

状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。

以下、五角形の矢印のサンプルです。

HTML

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

CSS

.arrow {
  position: relative;
  width: 80px;
  height: 40px;
  background: #000000;
}
.arrow::after {
  content: "";
  position: absolute;
  right: -40px;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

五角形の矢印は四角形と三角形で構成されています。今回ポイントになるのは疑似要素で設定している三角形の部分です。
border の辺同士が接している部分が斜めになることを利用して、右向きの矢印を構成している border-left 以外に 要素の背景色を透明にする transparent を設定します。
border-left 以外の要素が透明になり、結果として右向きの矢印だけが表示されているように見せています。

transparent 設定前。

border-left 以外に transparent を設定。

五角形の矢印を応用

五角形の矢印を少し応用して、コピペで簡単に実装できる例をご紹介します。

左向きの五角形の矢印

CSS

.arrow {
  position: relative;
  width: 80px;
  height: 40px;
  background: #000000;
}
.arrow::after {
  content: "";
  position: absolute;
  left: -40px;
  border-right: 20px solid;
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

右向きの時は border-left 以外の border 要素の背景を透明にしましたが、左向きの時は border-right 以外の border 要素の背景を透明にします。