どうも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制作のちょいテク詰め合わせ
↧
