ログイン
問題8

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

CSSを駆使して、見本のような4つ葉のクローバーを作ります。 flexboxをうまく活用して配置を指定しましょう!

アイコン画像

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

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にして要素を尖らせる形にします。
ログインして解答を見る

コメントのアイコン補足

今回は親要素にwidth420px、子要素4つにwidth200pxを付与することで、3個目以降の要素がdisplay:flexとflex-wrap:wrapの効果によって下段に落ちて配置されました。

このようにwidthとflex-wrapを指定することによって簡単に2カラムの要素を作ることができます。このテクニックは是非覚えておきましょう。

葉の部分に関しては、border-radiusで左上、右上、右下、左下の順番で角丸を指定できるのでまとめて指定するようにしましょう。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる