Membuat Diamond Dengan CSS3

Baca Juga

Bismillahirrahmanirrahim...semakin hari perkembangan CSS kini semakin bagus dan mantap,pada kesempatan ini saya akan share cara membuat diamond dengan CSS3.

Diamond Dengan CSS3

Untuk membuat bentuk diamond dengan CSS3 sangatlah mudah karna sudah banyak sekali contoh contohnya di internet, tapi jika sobat tidak suka googling dan mencari di dunia maya mending tinggal copy paste saja codenya di bawah ini.

Jika blog sobat ingin kelihatan keren dan bagus solahkan sobat kembangkan oleh sobat disini saya cuma akan memberikan sedikit gambaran membuat bentuk Diamond dengan CSS3.

Oke deh daripada basa basi kesana kemari mending langsung saja Copy Vaste kode CSS nya di bawah ini.

KODE CSS3 Untuk bentuk Diamond

#diamond {
   width: 80px;
   height: 80px;
   background: red;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}   

Kode CSS3 diatas akan menghasilkan bentuk diamond seperti di bawah ini, untuk merubah warnanya, silahkan sobat ganti kode background: red; dengan selera sobat.

Untuk penerapannya sobat tinggal pakai di tag div atau span untuk contoh diatas saya menggunakan tag div

Kode Diamond CSS3

 <div class="diamond" id="diamond"></div>

Oke deh sampai disini dulu postingan tentang CSS3 Diamond Semoga bermanfaat, Good Luck happy Blogging