Pada tutorial kali ini kita akan mempelajari sesuatu yang unik, yang mana mungkin beberapa orang belum tahu tentang ini. Mengapa belum tahu? karena kita akan membuat suatu bentuk berbeda dengan menggunakan CSS, dan menggunakan parameter/atribut CSS yang sebenarnya bukan dipakai untuk itu. Kita akan membuat bentuk segitiga dengan suatu kreatifitas mengutak-atik atribut CSS. Penasaran? Yuk kita buat aja
Bentuk segitiga banyak dipakai pada halaman HTML, contohnya adalah arrow, pagination, sorting icon, dan ikon2 lainnya. Bahkan jika digabungkan dengan kreatifitas lainnya, bentuk segitiga ini bisa dipakai untuk gambar ribbon sehingga akan terlihat 3D, mungkin untuk tutorial selanjutnya kita akan mempelajari bagaimana membuat ribbon.
Ok langsung saja kita pelajari tutorial membuat segitiga tanpa image, hanya menggunakan CSS.
File HTML
Buatlah sebuah file HTML sederhana, misalnya segitiga.html, kemudian isikan kode berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>SEGITIGA</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="segitiga"></div>
</body>
</html>
Pada kode HTML di atas, kita telah membuat suatu elemen div yang mempunyai id = "segitiga", yang mana nanti div tersebut akan kita jadikan sebagai elemen yang berbentuk segitiga. Pada kode di atas, di bagian head kita buat tag untuk menghubungkan file html dengan file CSS baru yang akan kita buat. Kemudian setelah itu, buatlah file CSS bernama style.css dan disimpan di dalam folder yang sama dengan file HTML.
File CSS
Buatlah file CSS baru dengan nama style.css dan simpan di dalam suatu folder. Setelah itu isikan dengan kode CSS berikut ini:
#segitiga{
border-color: transparent #f00 transparent transparent;
border-width: 10px;
border-style: solid;
height: 0;
width: 0;
}
Preview dan Penjelasan
Setelah file HTML dan CSS dibuat dalam satu folder, maka selanjutnya kita lihat hasil yang kita buat tadi pada browser. Setelah kita tampilkan di browser, maka tampilannya akan terlihat seperti berikut ini:
Mengapa terbentuk seperti itu? Kenapa kok jadi ada segitiganya?
Sebenarnya simpel, kita hanya membuat sebuah elemen div kosong yang diberi border dengan warna transparan, KECUALI border kanan. Di situ ditulis:
border-color: transparent #f00 transparent transparent;
Karena format pengisian value untuk parameter/atribut border-color adalah: warna atas - warna kanan - warna bawah - warna kiri. Jadi, ketika kita set warna lainnya transparan, maka kita set untuk border di sebelah kanan menjadi warna MERAH (#f00), atau dapat juga kita ganti #f00 menjadi red atau apapun terserah kamu. Di situ terlihat bahwa segitiga menghadap ke sebelah kiri. Jika kita menginginkan bentuk piramida (menghadap ke atas) maka kita harus set warna pada border bawah, dan seterusnya (berseberangan). Nanti kita jelaskan mengapa bisa jadi bentuk segitiga.
border-width akan kita jadikan sebagai ukuran segitiga, semakin tinggi border width, maka semakin besarlah segitiga tersebut.
Width dan Height harus kita set 0, mengapa? Coba kita lihat ilustrasi berikut ini:
Ok, tutorial selesai, silakan berikan komentar, diskusi, pertanyaan, dan sebagainya di bagian komentar
Stand By With Me,
cheyuz@jagocoding.com
