【CSS】くの字型アイコンの作り方

CSSでくの字型アイコンを作る方法を紹介します。

矢印の代わりなど、何かと使う機会が多いです。

右向きくの字型アイコン

<span class="arrow-right"></span>

.arrow-right {
  display: block;
  width: 18px;
  height: 18px;
  border-top: 4px solid #00d9ff;
  border-right: 4px solid #00d9ff;
  transform: rotate(45deg) translateX(-25%);
}

左向きくの字型アイコン

<span class="arrow-left"></span>

.arrow-left {
  display: block;
  width: 18px;
  height: 18px;
  width: 18px;
  height: 18px;
  border-left: 4px solid #00d9ff;
  border-bottom: 4px solid #00d9ff;
  transform: rotate(45deg);
}

上向きくの字型アイコン

<span class="arrow-top"></span>

.arrow-top {
  display: block;
  width: 18px;
  height: 18px;
  border-top: 4px solid #00d9ff;
  border-left: 4px solid #00d9ff;
  transform: rotate(45deg);
}

下向きくの字型アイコン

<span class="arrow-bottom"></span>

.arrow-bottom {
  display: block;
  width: 18px;
  height: 18px;
  border-bottom: 4px solid #00d9ff;
  border-right: 4px solid #00d9ff;
  transform: rotate(45deg);
}

カスタマイズ方法

サイズを調整したい場合は、 width と height の値を調整します。

また、線の太さや色を変更したい場合は、 border の値を調整します。