CSSだけでできる！プラス・マイナスアイコンの作り方

2019年7月31日2020年6月20日

今回はアイコンを使わずに、CSSだけでプラス・マイナスアイコンを作る方法を紹介します。

CSSだけでアイコンっぽいものを作るとなると面倒なイメージですが、プラス・マイナスアイコンくらいなら全然難しくありません。

イメージは縦横20pxの丸いアイコンです。背景色はグレーで、アイコン自体は白にします。

HTML

<div class="icon mB20">
  <span class="icon__mark"></span>
</div>

<div class="icon icon--plus">
  <span class="icon__mark"></span>
</div>

spanに擬似要素を使ってプラス・マイナスを作ります。

divはグレーの背景色などを指定するのに使います。

CSS

.mB20 {
  margin-bottom: 20px;
}

.icon {
  position: relative;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
}

.icon::before, .icon--plus::after {
  position: absolute;
  top: 9px;
  left: 50%;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  transform: translateX(-50%);
}

.icon--plus:after {
  top: 3px;
  left: -3px;
  transform: rotate(90deg);
}

プラス・マイナスはborderを使って作ります。

マイナスの場合はborderが1つ、プラスの場合は::afterで線をもう一本作って90度傾ければいいだけですね。

割と簡単に作れるので、ぜひやってみてください。