Membuat Berbagai Bentuk dengan CSS3 ~ DELOGIN ZONE

Membuat Berbagai Bentuk dengan CSS3

Posted by : Unknown Jumat, 18 April 2014

Masih ingatkah sobat dengan pelajaran Matematika tentang bangun datar?... Bangun datar terdiri dari persegi, persegi panjang, segitiga, lingkaran, jajaran genjang, dll. Nah pada kesempatan kali ini saya akan share cara pembuatan bentuk-bentuk tersebut menggunakan CSS3. Bagaimana caranya?...

Perlu diketahui, bentuk dasar yang bisa dibuat pada CSS umumnya adalah persegi atau persegi panjang tergantung panjang dan tingginya. Nah, untuk menciptakan bentuk lingkaran kita hanya perlu menambahkan CSS border-radius dengan nilai 50%. Sedangkan untuk bentuk segitiga kita hanya perlu memanipulasi CSS border saja. Itulah cara singkat untuk membuat bentuk dasar. Contohnya bisa dilihat dibawah ini:

Persegi (Square)

#persegi {
width: 120px;
height: 120px;
background: blue;
}

Persegi Panjang (Rectangle)

#persegi-panjang {
width: 160px;
height: 80px;
background: blue;
}

Lingkaran (Circle)

#lingkaran {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}

Oval

#oval {
width: 160px;
height: 90px;
background: red;
border-radius: 50%;
}

Segitiga Sama Sisi (Triangle)

#segitiga-sama-sisi {
width: 0;
height: 0;
border-bottom: 104px solid yellow;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

Segitiga Siku-Siku

#segitiga-siku {
width: 0;
height: 0;
border-bottom: 100px solid yellow;
border-right: 100px solid transparent;
}

Jajaran Genjang (Parallelogram)

#jajaran-genjang {
width: 130px;
height: 75px;
background: lime;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

Itulah tadi beberapa bentuk sederhana yang dibuat dari CSS3. Jangan hanya berhenti disitu saja, gunakan imajinasi untuk menciptakan bentuk lain yang unik seperti di bawah ini:

Pacman

#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid darkorange;
border-left: 60px solid darkorange;
border-bottom: 60px solid darkorange;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}

Hati (Heart)

#hati {
position: relative;
}
#hati:before, #hati:after {
position: absolute;
content: "";
left: 70px;
top: 0;
width: 70px;
height: 115px;
background: hotpink;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#hati:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

Nah, itulah beberapa benuk yang dapat kita buat menggunakan CSS3, untuk selengkapnya sobat bisa melihatnya di CSS Portal. Seperti yang telah saya katakan di atas tadi "gunakan imajinasi sobat untuk membuat bentuk lain yang unik". Yosh, sekian dulu pertemuan kali ini... Selamat berkreasi, Sayounara...