忍者CODE

ログイン

8
4つ葉のクローバーを実装しよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
HTML/CSSを使って四葉のクローバーを実装しよう

見本を画像を参考に作成してください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div class="clover-cat">
  <span class="clover-cat__part--one"></span>
  <span class="clover-cat__part--two"></span>
  <span class="clover-cat__part--three"></span>
  <span class="clover-cat__part--four"></span>
</div>
¥HTML¥
          
            .clover-cat {
    display: flex;
    flex-wrap: wrap;
    width: 420px;
    margin: 20px auto;
  }
  .clover-cat span {
    display: inline-block;
    background-color: green;
    margin: 5px;
    width: 200px;
    height: 200px;
  }
  .clover-cat__part--one {
    border-radius: 50% 50% 0 50%;
  }
  .clover-cat__part--two {
    border-radius: 50% 50% 50% 0;
  }
  .clover-cat__part--three {
    border-radius: 50% 0 50% 50%;
  }
  .clover-cat__part--four {
    border-radius: 0 50% 50% 50%;
  }
¥CSS¥
          
答えのアイコン

解説

背景緑色の要素を4つ用意します。
それをdisplay:flexとflex-wrap:wrapを付与し上下2つずつに配置します。

そしてクローバーの実装ですが各葉っぱによりborder-radiusを1箇所0pxにして要素を尖らせる形にします。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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