【初心者でもわかる】CSSで「✕」の作り方

どうも7noteです。CSSオンリーで「✕」を作ります

CSSを使って✕を作ります。
コピペで使えますよ。

線の端を丸くすることも可能

cssで✕の作り方

.batten {
  width: 20px;        /* 線の長さ */
  position: relative; /* 基準位置に指定 */
}

.batten::before,
.batten::after {
  content: "";      /* 疑似要素に必須 */
  width: 100%;      /* 幅いっぱいを指定 */
  height: 2px;      /* 適度な太さを指定 */
  display: inline-block; /* 高さを持たせるためにinline-blockを指定 */
  background: #aaa; /* 線の色を指定 */
  border-radius: 2px;    /* 線の端を丸くしたいなら指定する */
  position: absolute;    /* 相対位置に指定 */
  top: 0;           /* 表示位置を上から0pxに指定 */
  left: 0;          /* 表示位置を左から0pxに指定 */
}

.batten::before {
  transform: rotate(45deg); /* 時計回りに45度回転させる */
}
.batten::after {
  transform: rotate(-45deg); /* 反時計回りに45度回転させる */
}

ハンバーガーメニュー（3本線メニュー）から✕に変わるやつ

こちらは過去の記事で紹介しているので以下からご覧ください。

まとめ

テキストで✕にしてもいいのですが、線1本ずつに装飾したり、アニメーションをさせるならcssで✕を作ったほうが勝手がいいですね。
あとはborder-radiusで線の端を丸くできるので、デザイン的にも◎。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ