CSS Membuat Bentuk Hati [Heart]

CSS Membuat Bentuk Hati [Heart] - Lanjutan lagi dari tutorial CSS sebelumnya, simple sekali jika dilihat tapi bagi saya sendiri ini sangat ribet, hee... Nyobain tutorial itu memang asik apalagi kalai kita bisa ngembangin, itu akan jadi nilai lebih bagi kita maupun blog kita. karena pada dasarnya setiap orang senang dengan hal-hal baru, makanya blog kita pun juga harus terus Update donk.

Oke langsung di Intip saja script nya :

#heart { 
  position: relative;
}
#heart:before, #heart:after {
  background: red;
  border-radius: 50px 50px 0 0;
  content: "";
  height: 115px;
  left: 70px;
  position: absolute;
  top: 0;
  width: 70px;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart:after { 
 left: 0; 
  -moz-transform: rotate(45deg); 
  -webkit-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
}

Oke, silahkan dicoba dan praktekin sendiri ya. Jika ada yang mau menyempurnakan silahkan koment dibawah.

Demonya seperti dibawah ini : CSS Membuat Bentuk Hati [Heart]

  

Sekian dan Salam Sukses dari Fidiana Lestari Blog. Hee ^_^.

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