ログイン

無料会員登録

A Single Div チャレンジ

概要

a.singlediv.comのサイトを覗くとなんとサイト上のイラストは全て1つのDivでできています! 1つのDivで複雑な要素を描くためには疑似要素やシャドウ、バックグラウンド画像を重ね合わせることで可能になります。

ここで例としてカメルーンの国旗を 1つのDiv で描いてみましょう。

Cameroon

HTMLはDivを1つ用意するだけです。 headbody は省略しています。

<div class="cameroon"></div>

あとは左から順番に国旗の背景を設定していきます。 真ん中の国旗にはスターを content 要素で設定しています。

// 国旗の左端
.cameroon {
position: relative;
background-color: #007A5E;
width: 200px;
height: 400px;
}

// サイズ
.cameroon,
cameroon::before,
cameroon::after {
width: 200px;
height: 400px;
}

// 国旗の真ん中
.cameroon::before {
content: '\2605';
left: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #FCD116;
font-size: 6.0em;
background-color: #CE1126;
}


// 国旗の右端
.cameroon::after {
left: 200%;
background-color: #FCD116;
}

これで国旗の完成となります。

?問題