Membuat Bentuk Jajar Genjang Dengan CSS3

Membuat jajaran genjang dengan CSS3 – Halo teman-teman, selamat datang kembali di tutorial CSS3 Lengkap dari lazngoding.com. Apa kabar? semoga teman dan keluargamu selalu dalam keadaan sehat.
Dalam tutorial CSS3 ini, kita akan membahasnya cara membuat bentuk jajaran genjang menggunakan CSS3.
Membuat jajaran genjang dengan CSS3
Seperti yang sobat pelajari pada tutorial css3 sebelumnya, CSS memiliki kemampuan untuk merubah bentuk sebuah elemen. dengan berbagai macam bentuk yang kita inginkan. termasuk dalam bentuk jajaran genjang.
Untuk membuat bentuk genjang, kita bisa menggunakan perintah condong () di Properti ubah css3.
Bentuk jajaran genjang yang akan kita buat berasal dari bentuknya kotak atau kotak. yang kemudian kita beri perintah skew () untuk memiringkannya.
Membuat jajaran genjang dengan CSS3 menggunakan Skew ()
Skew () berguna untuk memiringkan elemen. ada berbagai lereng yang bisa kita sesuaikan. ini adalah kemiringan sumbu X (ke kiri atau kanan) dan sumbu Y (atas atau bawah).
Tolong perhatikan teman-teman seperti contoh berikut.
Contoh berikut saya buat di file index.html.
HTML
Jajar genjang CSS3 - www.malasngoding.com
Ini adalah kotak biasa / persegiIni adalah jajaran genjangIni adalah jajaran genjang
Seperti yang terlihat pada contoh script di atas, kita akan mencoba membuat beberapa elemen kotak. diantara kotak tersebut kita akan membuat bentuk kotak biasa dan bentuk jajaran genjang. agar lebih mudah melihat perbedaan menurut teman.
Dan inilah skrip CSS.
CSS
.box1 { latar belakang: merah; margin: 50px; lebar: 200px; tinggi: 200px; float: kiri; } .box2 { margin: 50px; latar belakang: hijau; lebar: 200px; tinggi: 200px; float: kiri; -ms-transform: skew (20deg); / * Dukungan untuk IE 9 * / -webkit-transform: skew (20deg); / * dukungan untuk Safari * / transform: skew (20deg); / * sintaks default * / } .box3 { margin: 50px; float: kiri; latar belakang: biru; lebar: 280px; tinggi: 200px; -ms-transform: skew (20deg); / * Dukungan untuk IE 9 * / -webkit-transform: skew (20deg); / * dukungan untuk Safari * / transform: skew (20deg); / * sintaks default * / }
Silahkan sesuaikan penempatan CSS, bisa internal maupun eksternal. Jika Anda tidak memahami perbedaan antara CSS internal dan CSS eksternal, Anda dapat membaca tutorialnya di sini.
Oke lanjutkan.
HASIL
Sekarang kita lihat hasilnya. hasilnya akan seperti berikut saat dijalankan di browser.

Membuat jajaran genjang dengan CSS3
NB: Posisi kotak berurutan ke samping karena kita menggunakan perintah CSS float: kiri;.
Penjelasan
Seperti yang terlihat pada gambar di atas. ada 3 box yang kami buat. yang pertama kami berikan di kelas. box1, kotak kedua kita beri kelas .kotak2 dan kotak ketiga kita beri kelas .kotak3.
box1 adalah kotak biasa yang kami buat dengan cara yang sangat mudah. yaitu hanya dengan memberikan background: red, kemudian kita atur height dan width menjadi 200px.
kotak2 juga sama dengan box1. perbedaan di kotak kita memberi efek condong () untuk membuat lereng. tingkat kemiringan yang kita miliki 20deg. teman teman bisa merubah derajat kemiringan sesuai nilai yang diinginkan tergantung kemiringan yang diinginkan.
latar belakang: hijau; lebar: 200px; tinggi: 200px; -ms-transform: skew (20deg); / * Dukungan untuk IE 9 * / -webkit-transform: skew (20deg); / * dukungan untuk Safari * / transform: skew (20deg); / * sintaks default * /
box3 juga masih sama dengan kotaknya. perbedaannya adalah kita memberi kotak dengan lebar yang lebih dari tinggi. agar terlihat lebih luas. yaitu, kami memberikan tinggi 200px dan lebar 280px.
latar belakang: biru; lebar: 280px; tinggi: 200px; -ms-transform: skew (20deg); / * Dukungan untuk IE 9 * / -webkit-transform: skew (20deg); / * dukungan untuk Safari * / transform: skew (20deg); / * sintaks default * /
Mengenal Skew () di CSS3
Contoh penggunaan perintah skew () di atas adalah contoh penggunaan yang paling sederhana.
Lalu ada sesuatu yang disebut skewX () dan skewY ().
Penggunaan skewX ()
dan bisa menggunakan perintah skewX () untuk membuat lereng kiri dan kanan.
Penggunaan skewY ()
Kita bisa menggunakan perintah skewY () untuk membuat lereng naik dan turun.
Contoh skewX () dan skewY ()
HTML
Ini adalah kotak 4. contoh skewXIni adalah kotak 5. contoh skewX dengan nilai minusIni adalah kotak 6. contoh skewYIni adalah kotak 7. contoh skewY dengan nilai minus
CSS
.box4 { margin: 50px; float: kiri; latar belakang: kuning; lebar: 280px; tinggi: 200px; -ms-transform: skewX (20deg); / * Dukungan untuk IE 9 * / -webkit-transform: skewX (20deg); / * dukungan untuk Safari * / mengubah: skewX (20deg); / * sintaks default * / } .box5 { margin: 50px; float: kiri; latar belakang: kuning; lebar: 280px; tinggi: 200px; -ms-transform: skewX (-20deg); / * Dukungan untuk IE 9 * / -webkit-transform: skewX (-20deg); / * dukungan untuk Safari * / transformasi: skewX (-20deg); / * sintaks default * / } .box6 { margin: 50px; float: kiri; latar belakang: oranye; lebar: 280px; tinggi: 200px; -ms-transform: skewY (30deg); / * Dukungan untuk IE 9 * / -webkit-transform: skewY (30deg); / * dukungan untuk Safari * / transform: skewY (30deg); / * sintaks default * / } .box7 { margin: 50px; float: kiri; latar belakang: oranye; lebar: 280px; tinggi: 200px; -ms-transform: skewY (-30deg); / * Dukungan untuk IE 9 * / -webkit-transform: skewY (-30deg); / * dukungan untuk Safari * / transform: skewY (-30deg); / * sintaks default * / }
HASIL
Hasil untuk skewX () dan skewY () di atas adalah sebagai berikut.

contoh skewX () dan skewY ()
Penutupan
Jadi, inti dari proses membuat jajaran genjang menggunakan css3 ada pada perintahnya condong ().
perintah condong () kami gunakan untuk membuat efek miring pada elemen. lalu kita bisa mengisi derajat kemiringannya. misalnya skew (20deg), skew (50deg) dan sebagainya.
transform: skew (20deg);
atau
transform: skew (-20deg);
Kita juga bisa menerapkan perintah skew () ke elemen gambar. Lakukan latihan agar lebih terbiasa dengan skew ().
Berikut adalah contoh keseluruhan dari tutorial Membuat jajaran genjang dengan CSS3.
jajargenjang.html
Membuat jajaran genjang dengan CSS3 - www.malasngoding.com Jajar genjang CSS3 - www.malasngoding.com
Kotak ini 1. bentuk persegiIni adalah kotak 2. bentuk jajaran genjangIni adalah kotak 3. bentuk jajaran genjangIni adalah kotak 4. contoh skewXIni adalah kotak 5. contoh skewX dengan nilai minusIni adalah kotak 6. contoh skewYIni adalah kotak 7. contoh skewY dengan nilai minus
DEMO
Itu semua tentang tutorialnya genjang css. sampai jumpa di tutorial css3 selanjutnya.
Postingan Membuat formulir jajaran genjang dengan CSS3 muncul pertama kali di Lazy Ngoding.