cssでプラスアイコン,マイナスアイコンを作る

CSSでプラスアイコン、マイナスアイコンを作成

デザイナーさんから頂いたpsdの中に
プラスアイコンとマイナスアイコンがあった。
svgとかpngとか実装方法は色々あると思うけど、今回はcssで作ってみた

作りたいもの

↑こんなもの

コード

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

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

.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を作って
プラスの場合は2つborderを作って一つを回転させてあげれば作れますね。

まあ、なんか使う機会があれば是非試してみてください。