Cara Membuat Element Jajar Genjang Di CSS3

Pada kesempatan kali ini saya akan menjelaskan cara membuat kotak jajar genjang di css3. Sebelum membahas lebih jauh ada baiknya jika teman-teman tahu terlebih dahulu property css untuk membuat jajar genjang tersebut, property yang saya akan gunakan adalah transform. CSS transform memungkinkan teman-teman untuk membuat efek skew di element HTML.

Skew ()

Skew digunakan untuk memiringkan suatu element dengan mengatur tiap nilai pada sumbu X nya.

Berikut contoh nya:

• Teman-teman buat terlebih dahulu satu buah file dengan nama index.html, ketikan kode seperti berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Cara Membuat Kotak Jajar Genjang Dengan Transform | dumetschool.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Cara Membuat Kotak Jajar Genjang Dengan Transform</h1>
	<h2>skew()</h2>
        <div id="pembungkus">
	<div class="kotak">
		Ini adalah kotak default tanpa skew()	</div>
	<div class="kotak1">
		Ini adalah kotak 1 dengan skew() CSS Transform
	</div>
	<div class="kotak2">
Ini adalah kotak 2 dengan skew() CSS Transform
	</div>
	<div class="kotak3">
Ini adalah kotak 3 dengan skew() CSS Transform
	</div>
	<div class="kotak4">
Ini adalah kotak 4 dengan skew() CSS Transform
	</div>
       </div>
</body>
</html>

Jika sudah teman-teman bisa save file index.html tersebut.

• Teman-teman buat lagi satu buah file dengan nama style.css, sejajar dengan file index.html yang sebelum nya di buat, dan ketikan kode css seperti di bawah ini :

*{
margin:0; padding:0;
}
body{
	background: #111;
	text-align: center;
}

h1,h2{
	color: #fff;
}
#pembungkus{
width: 100%; 
height: auto; 
padding: 20px; 
margin:auto;
}

.kotak{
	background: #fcfcfc;
	padding: 20px;
	float: left;
	margin: 50px;
	width: 150px;
	height: 150px;	
}

.kotak1{
	background: #fcfcfc;
	padding: 20px;
	float: left;
	margin: 50px;
	width: 150px;
	height: 150px;
	-ms-transform: skew(20deg); /* Support untuk IE 9 */
    -webkit-transform: skew(20deg); /* support untuk Safari */
    transform: skew(20deg); /* default syntax */ 
}

.kotak2{
	background: #fcfcfc;
	padding: 20px;
	float: left;
	margin: 50px;
	width: 150px;
	height: 150px;
	-ms-transform: skew(30deg,20deg); /* Support untuk IE 9 */
    -webkit-transform: skew(30deg,20deg); /* support untuk Safari */
    transform: skew(30deg,20deg); /* default syntax */ 
}

.kotak3{
	background: #fcfcfc;
	padding: 20px;
	float: left;
	margin: 50px;
	width: 150px;
	height: 150px;
	-ms-transform: skewY(20deg); /* Support untuk IE 9 */
    -webkit-transform: skewY(20deg); /* support untuk Safari */
    transform: skewY(20deg); /* default syntax */ 
}

.kotak4{
	background: #fcfcfc;
	padding: 20px;
	float: left;
	margin: 50px;
	width: 150px;
	height: 150px;
	-ms-transform: skewX(20deg); /* Support untuk IE 9 */
    -webkit-transform: skewX(20deg); /* support untuk Safari */
    transform: skewX(20deg); /* default syntax */ 
}

Jika sudah save file style.css tersebut, dan teman-teman bisa lihat hasil nya pada browser.

Demikian penjelasan mengenai cara membuat kotak jajar genjang di css3, Semoga Bermanfaat.