忍者CODE

ログイン

32
CSSのみで×を表現してみよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
ハンバーガーメニューなどにある×をCSSで表現してみましょう!
見本画像を参考にしてCSSに記述し実装してください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <span></span>
¥HTML¥
          
            body {
    padding: 64px;
}
span::before,
span::after {
  display: block;
  content: "";
  width: 50px;
  height: 1px;
  background: #000;
}
span::before {
	transform: rotate(-45deg);
}
span::after {
	transform: rotate(45deg);
}
¥CSS¥
          
答えのアイコン

解説

beforeとafterを上手く使って実装します。

transform: rotate(-45deg);とtransform: rotate(45deg);
を指定する事でクロスになります。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET