Membuat Bentuk Jajar Genjang Dengan CSS3

Membuat Bentuk Jajar Genjang Dengan CSS3 – Halo teman-teman, selamat datang kembali di tutorial CSS3 Lengkap dari malasngoding.com. Apa kabar semua? mudah-mudahan teman-teman dan keluarga selalu dalam keadaan sehat.

Pada tutorial CSS3 ini, kita akan membahas tentang cara membuat bentuk jajar genjang menggunakan CSS3.

Membuat Bentuk Jajar Genjang Dengan CSS3

Seperti yang sudah teman-teman pelajari pada tutorial css3 sebelumnya, CSS memiliki kemampuan untuk merubah bentuk dari suatu elemen. dengan berbagai macam bentuk yang kita inginkan. termasuk bentuk jajar genjang.

Untuk membuat bentuk jajar genjang, kita bisa menggunakan perintah skew() pada property transform css3.

Bentuk jajar genjang yang akan kita buat berasal dari bentuk kotak atau persegi. yang kemudian kita berikan perintah skew() untuk memiringkan nya.

Membuat Bentuk Jajar Genjang Dengan CSS3 Menggunakan Skew()

Skew() berguna untuk memiringkan suatu elemen. ada berbagai kemiringan yang bisa kita atur. diantaranya adalah kemiringan sumbu X (ke kiri atau ke kanan) dan sumbu Y (ke atas atau ke bawah).

Silahkan teman-teman perhatikan seperti contoh berikut.

Contoh berikut saya buat dalam file index.html.

HTML

Seperti yang terlihat pada contoh script di atas, kita akan mencoba membuat beberapa buah elemen kotak. yang diantara kotak-kotak tersebut akan kita buatkan bentuk kotak biasa dan bentuk jajar genjang. agar lebih mudah dilihat perbedaannya oleh teman-teman.

Dan berikut script CSS nya.

CSS

Silahkan teman-teman sesuaikan untuk penempatan CSS nya, bisa internal atau pun external. jika teman-teman belum paham tentang perbedaan dari internal CSS dan external CSS teman-teman bisa baca tutorialnya di sini.

Oke lanjut.

HASIL

Sekarang kita lihat hasilnya. hasilnya akan seperti berikut pada saat dijalankan di browser.

Membuat Bentuk Jajar Genjang Dengan CSS3

NB : Posisi kotak menjadi berurutan ke samping karena kita menggunakan perintah CSS float:left;.

Penjelasan

Seperti yang terlihat pada gambar di atas. ada 3 buah kotak yang kita buat. yang pertama kita beri class .kotak1, kedua kita beri class .kotak2 dan kotak yang ketiga kita beri class .kotak3.

kotak1 adalah kotak biasa yang kita buat dengan cara yang sangat mudah. yaitu hanya dengan cara memberikan background:red, kemudian kita atur tinggi dan lebarnya sebesar 200px.

kotak2 juga sama dengan kotak1. bedanya pada kotak2 kita memberikan efek skew() untuk membuat kemiringan. derajat kemiringan nya kita ber 20deg. teman-teman bisa mengubah derajat kemiringan nya sesuai nilai yang diinginkan tergantung kemiringan yang diinginkan.

kotak3 juga masih sama dengan kotak2. bedanya kotak3 kita beri lebar yang lebih dari pada tinggi nya. agar terlihat lebih lebar. yaitu kita beri tinggi 200px dan lebar 280px.

Mengenal Skew() pada CSS3

Contoh penggunakan perintah skew() di atas merupakan contoh penggunaan yang paling sederhana.

Kemudian ada lagi yang namanya skewX() dan skewY().

Penggunaan skewX()

dan bisa menggunakan perintah skewX() untuk membuat kemiringan ke kiri dan ke kanan.

Penggunaan skewY()

Kita bisa menggunakan perintah skewY() untuk membuat kemiringan ke atas dan ke bawah.

Contoh skewX() dan skewY()

HTML

CSS

HASIL

Hasil dari skewX() dan skewY() di atas akan seperti berikut.

contoh skewX() dan skewY()

Penutup

Jadi, inti dari proses pembuatan bentuk jajar genjang menggunakan css3 ini ada pada perintah skew().

perintah skew() kita gunakan untuk membuat efek miring pada sebuah elemen. kemudian derajat kemiringan nya bisa kita isikan di dalam nya. misalnya skew(20deg), skew(50deg) dan sebagainya.

atau

Kita juga bisa menerapkan perintah skew() pada elemen gambar. Silahkan melakukan latihan untuk lebih familiar dengan skew().

Berikut ini contoh keseluruhan dari tutorial Membuat Bentuk Jajar Genjang Dengan CSS3.

jajargenjang.html

DEMO

Sekian dulu tentang tutorial jajar genjang css. sampai jumpa pada tutorial css3 selanjutnya.