Cara Membuat CSS Geometric Parallelogram

Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Membuat CSS Geometric Parallelogram. Pada kesempatan kali inio kita akan belajar tentang cara membuat sebuah CSS Geometric Parallelogram. Caranya cukup mudah sekali, kita cukup membutuhkan pemahaman tentang properti – properti dari CSS dan struktur dari HTML itu sendiri.

Jadi sebagai seorang programer kita di wajibkan di tuntut harus paham dengan CSS dan HTMl, Oke langsung saja kita pada pembahasan kita Cara Membuat CSS Geometric Parallelogram. Untuk memulai silahkan teman – teman buat file HTML-nya terlebih dahulu. Kalua sudah silahkan ikuti petunjuk di bawah ini.

CSS_Geometric_Parallelogram.html

Isi file yang teman – teman buat tadi dengan struktur HTML di bawah ini,

<html>
	<head>
		<title> Cara Membuat CSS Geometric Parallelogram </title>
	</head>
	<body>
		<div class="parallelogram"></div>
	</body>
</html>

Kalau sudah silahkan teman – teman save, Sekarang kita lanjut buat fungsi CSS-nya seperti di bawah ini:

<style>
         .parallelogram {
			   height: 75px;
			   width: 150px; 
			   background: #07CAF3;
			   -webkit-transform: skew(20deg); 
			   -moz-transform: skew(20deg); 
			   -o-transform: skew(20deg);
			   transform: skew(20deg);
			   margin: 10px
			}
</style>

Oke kalau sudah silahkan teman – teman save dan jalan pada browsernya, jika teman membuat struktur HTML dan CSS – nya dengan benar maka hasilnya akan seperti dibawah ini:

Oke itulah tadi pembahasan saya tentang Cara Membuat CSS Geometric Parallelogram, semoga dapat bermanfaat.

Cara Membuat CSS Geometric Parallelogram

Kategori