Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Membuat Geometris CSS Trapezoid.   Mempelajari fungsi – fungsi dari CSS akan berguna saat kita  ingin menggambar bentuk geometris dengan CSS tanpa menggunakan gambar. Kebanyakan dari para programer sangat menyukai cara ini, karena lebih efisien dari berat datanya daripada kita menggunkan sebuah gambar.  Karena gambar mempunyai nilai ukuran datanya jauh lebih besar di banding sebuah teks. Dengan memahami fungsi – fungsi properti CSS kita akan mampu membuat sebuah Geometris CSS tidak hanya itu saja tentu masih banyak sekali seperti animasi. 

Pada tutorial kali ini kita akan membuat sebuah Geometris CSS Trapezoid, bagaimana caranya silahkan kalian ikutin tutorial ini. Langkah pertama kita akan membuat sebuah file HTML terlebih dahulu tentunya.  Jadi untuk teman – teman yang ingin mempraktikkannya silahkan persiapkan teks editornya.  Pertama Buat file bernama

Geometris_CSS_Trapezoid.HTML

Kalau sudah silahkan teman – teman isi file tersebut dengan tag HTML di bawah ini:

Oke kalau sudah, saya akan jelaskan sedikit tentang struktur HTML diatas , kenapa kok kelas div-nya kosong, karena sengaja dikosongkan tujuan pembuatan div tersebuat hanya untuk pembuatan border.  Nantinya kita akan membuat Geometris CSS Trapezoid dengan memnafaatkan div tersebut  disini kita hanya bermain border saja. OKe untuk lebih jelasnya  silah buat file css di bawah ini:

Oke kalau sudah silahkan teman – teman coba save dan jalankan pada browsernya maka hasilnya akan seperti di bawah ini;

Cara Membuat Geometris CSS Trapezoid

Jika teman – teman membuat struktur HTML dan CSS-nya dengan benar otomatis hasilnya akan seperti di atas. Oke itulah tadi pembahasan saya tentang Cara Membuat Geometris CSS Trapezoid, semoga bermanfaat. Salam coding.