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 / persegi



  
  
  
  Ini adalah jajaran genjang



  
  
  
  Ini 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.

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 skewX



  
  
  
  Ini adalah kotak 5. contoh skewX dengan nilai minus



  
  
  
  Ini adalah kotak 6. contoh skewY



  
  
  
  Ini 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.

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

	


	

	
		
Jajar genjang CSS3 - www.malasngoding.com
	

	

		
		
		
		Kotak ini 1. bentuk persegi
	

	

		
		
		
		Ini adalah kotak 2. bentuk jajaran genjang
	

	

		
		
		
		Ini adalah kotak 3. bentuk jajaran genjang
	

	

		
		
		
		Ini adalah kotak 4. contoh skewX
	

	

		
		
		
		Ini adalah kotak 5. contoh skewX dengan nilai minus
	

	

		
		
		
		Ini adalah kotak 6. contoh skewY
	

	

		
		
		
		Ini 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.