CSSで「×」バツマークを作る方法

CSSで「×」バツマークを作る方法を紹介します。

主に閉じるボタンなどでよく使うテクニックです。
サイズや色の調整方法も載せているので、ぜひ自分好みに調整して使ってください。

コピペでOK！「×」バツマークの作り方

CSS

.cross {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 4px;
  background: #333;
  transform: rotate(45deg);
  vertical-align: middle;
}

.cross::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transform: rotate(90deg);
}

HTML

<span class="cross"></span>

カスタマイズ方法

.crossのCSSの値を調整してあげれば簡単にサイズや色などを変更可能です。

widthの値がバツマークの大きさとなります。数字が大きければ大きいほど、バツマークも大きくなります。

heightの値でバツマークの太さを設定しています。数字が大きければ大きいほど、バツマークが太くなります。

backgroundでバツマークの色を指定しています。好みの色に変更して使ってください。

まとめ

以上がで「×」バツマークを作る方法となります。

私はよくポップアップやモーダル、ハンバーガーメニュー等の閉じるボタンで使用しています。
(逆にそれ以外の使いみちはあまりないかも…？)

コピペで簡単に実装できると思うので、みなさんもぜひ使ってみてください。