CSS Membuat Bintang 8

CSS Membuat Bintang 8 - Karena masih belajar CSS dari awal jadinya harus sedikit demi sedikit, berikut ini kita belajar membuat Bintang 8. Sebenarnya sudut bintangnya ada banyak bukan 8, tetapi biar judulnya aga memancing untuk dilihat jadi make Bintang 8.

 Script awalnya adalah kita mendeklarasikan dengan twelve-point-star, bisa anda ganti sendiri dengan keinginan anda.




Berikut ini adalah tampilan Bintang 8 nya :

Oke sekarang lihat dan pelajari script nya dibawah ini.

#twelve-point-star {
  background: orange;
  height: 100px;
  position: absolute;
  width: 100px;
}
#twelve-point-star:before {
  background: orange;
  content:"";
  height: 100px;
  position: absolute;
  width: 100px;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
#twelve-point-star:after {
  background: orange;
  content:"";
  height: 100px;
  position: absolute;
  width: 100px;
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

Bagi Anda sudah mahir tidak usah hiraukan postingan ini, karena ini hanya untuk pembelajaran saya sendiri.
Thanks.

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.