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

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

HTMLはDivを１つ用意するだけです。 head や body は省略しています。

  <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;
}    

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