【CSS】×( バツ)マークを作る

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

モーダルやハンバーガーメニューの閉じるボタンなどで使用することが多いと思います。

サンプル

<div class="cross-1"></div>

.cross-1 {
  position: relative;
  width: 40px;
  height: 40px;
}
.cross-1::before,
.cross-1::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  margin: auto;
  background: #000;
}
.cross-1::before {
  transform: rotate(-45deg);
}
.cross-1::after {
  transform: rotate(45deg);
}

サイズを変更したい場合は、親要素 .cross-1 の width と heightの値を調整します。

また、線の太さを調整したい場合には、 .cross-1::before と .cross-1::after の height の値を調整してください。

色を変更する場合は、 .cross-1::before と .cross-1::after の background の値を調整してください。