Cara Membuat Logo Google Chrome Dengan CSS

Google Chrome adalah sebuah peramban web sumber terbuka yang dikembangkan oleh Google dengan menggunakan mesin rendering WebKit. Proyek sumber terbukanya sendiri dinamakan Chromium. (Wikipedia)
Kita pasti tahu bagaimana bentuk logonya, berbentuk bulat dengan warna merah, kuning, hijau, biru, dan putih. Nah, kali ini saya dan anda akan membuatnya dengan kode CSS. Yups, CSS. Ternyata kita bisa membuat logo tersebut dengan mudah hanya menggunakan sebuah CSS.

Untuk cara membuatnya memerlukan kode HTML dan CSS.

Code HTML

 <div class="chrome">
  <div class="chrome-yellow1"></div>
  <div class="chrome-green1"></div>
  <div class="chrome-green2"></div>
  <div class="chrome-center">
  </div>
</div>

Code CSS

.chrome {
  margin: 0 auto;
  margin-top: 40px;
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  @include border-radius(100px);
  position: relative;
  overflow: hidden;
}

.chrome-center {
  position: absolute;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  margin-top: 58px;
  margin-left: 58px;
  background-color: #65A2D3;
  @include border-radius(50%);
  border: 4px solid white;
}

.chrome-green1 {
  position: absolute;
  background-color: #5FBF60;
  width: 65px;
  height: 135px;
  margin-left: -20px;
  margin-top: 30px;
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
}

.chrome-green2 {
  position: absolute;
  background-color: #5FBF60;
  width: 74px;
  height: 135px;
  margin-left: 35px;
  margin-top: 96px;
  @include transform(rotate(26.8deg));
}

.chrome-yellow1 {
  position: absolute;
  background-color: #FCD630;
  width: 120px;
  height: 145px;
  margin-left: 94px;
  margin-top: 60.98px;
  @include transform(rotate(2deg));
}

Sekian artikel kali ini, semoga bermanfaat.