Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Membuat Geometris CSS Cone. Apasih CSS geometris itu, hehe. Sebenernya CSS geometris ini adalah CSS biasa, hanya saja kita akan bentuk dalam Geometris shapes seperti jajar genjang, segitiga dan cone yang akan kita bahas kali ini. Dan tentu juga masih banyak lagi tidak hanya sebatas itu saja. Tergantu dari kemampuan imajanesi kita mau bentuk seperti apa.
Namun pada pada tutorial kali ini saya sebagai tutor dalam artikel ini akan membuat sebuah Geometris CSS Cone. Oke bagi teman – teman yang penasaran seperti apasih Geometris CSS Cone itu silah lihat di bawah ini;
Oke langsung saja kita bikin, yang pertama siap sebuah file HTML dan beri nama Geometris_CSS_Cone.html
lalu isi file tersebut seperti di bawah ini;
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title> Cara Membuat Geometris CSS Trapezoid </title> </head> <body> <div class="cone"></div> </body> </html> |
Oke kalau sudah silahkan teman – teman buat lagi sebuah file CSS-nya serperti di bawah ini, taruh file CSS ini dalam file tadi dan letak di antara tag head.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style type="text/css"> .cone { height: 0; width: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid #07CAF3; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } </style> |
OKe kalau sudah silahkan teman – teman save dan jalan pada browsernya. Pada tag HTML di atas saya membuat sebuah div class cone dimana nantinya div tersebuat yang saya akan buat sebuah cone, dengan memanfaatkan properti dari css yaitu border-left, border-right, dan border-top serta pemanfaatan border-radius.
Dan jika teman – teman membuat struktur HTML serta CSS-nya dengan bener maka hasilnya akan seperti di bawah ini:
Oke teman – teman itulah tadi pembahasan saya tentang Cara Membuat Geometris CSS Cone, semoga bermanfaat. Salam coding.