Membuat Segitiga Ala CSS

Masih berkutat dengan berbagai bentuk bangun datar, bila dalam sebelumnya kita bahas mengenai cara membuat lingkaran dengan CSS maka kali ini adalah tentang bentuk segitiga dan tentu saja masih menggunakan CSS. Inti dasar untuk membuat segitiga adalah dengan menggunakan border (left, right, top, bottom) dan berikut cara membuatnya:
Untuk segitiga ke atas:

.up {
 border-bottom: 30px solid #333;
 border-left: 30px solid transparent;;
 border-right: 30px solid transparent;
 height:0;
 margin:0 10px;
 width:0;
}

Untuk segitiga ke bawah:

.down {
 border-top: 30px solid blue;
 border-left: 30px solid transparent;;
 border-right: 30px solid transparent;
 height:0;
 margin:0 10px;
 width:0;
}

Untuk segitiga ke kiri:

.left {
 border-left: 30px solid red;
 border-top: 30px solid transparent;;
 border-bottom: 30px solid transparent;
 height:0;
 margin:0 10px;
 width:0;
}

Untuk segitiga ke kanan:

.right {
 border-right: 30px solid green;
 border-top: 30px solid transparent;;
 border-bottom: 30px solid transparent;
 height:0;
 margin:0 10px;
 width:0;
}

Sehingga untuk memanggil semuanya dengan kode HTML berikut:

<div class="up" />
<div class="down" /><br />
<div class="left" />
<div class="right" />

Perhatikan pila dengan kode CSS tersebut kita hanya menggunakan lebar dari border sehingga kita menggunakan width:0 dan height:0.

Untuk hasilnya lihat DEMO di bawah ini :

Logika sederhananya :

• atas : bottom=warna, right=left=transparent
• bawah : top=warna, right=left=transparent
• kiri : left=warna, top=bottom=transparent
• kanan : right=warna, top=bottom=transparent

Selamat mencoba..!!

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250