HTML_CSS
Googleでログイン
問題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¥
補足
今回は親要素にwidth420px、子要素4つにwidth200pxを付与することで、3個目以降の要素がdisplay:flexとflex-wrap:wrapの効果によって下段に落ちて配置されました。
このようにwidthとflex-wrapを指定することによって簡単に2カラムの要素を作ることができます。このテクニックは是非覚えておきましょう。
葉の部分に関しては、border-radiusで左上、右上、右下、左下の順番で角丸を指定できるのでまとめて指定するようにしましょう。
このようにwidthとflex-wrapを指定することによって簡単に2カラムの要素を作ることができます。このテクニックは是非覚えておきましょう。
葉の部分に関しては、border-radiusで左上、右上、右下、左下の順番で角丸を指定できるのでまとめて指定するようにしましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
それをdisplay:flexとflex-wrap:wrapを付与し上下2つずつに配置します。
そしてクローバーの実装ですが各葉っぱによりborder-radiusを1箇所0pxにして要素を尖らせる形にします。