CSS Panah Segitiga (Triangle)

Cara membuat CSS Panah Segitiga (Triangle) sangat mudah yang di butuhkan hanya class psuedo dan pengaturan css.. dan kita bisa mengatut besar kecil dan arah panah tersebut.. lihat penggunaan css di bawah ini.

pertama yang kita butuhkan adalah HTML dengan class :

<div class="panah-atas"></div>
<div class="panah-bawah"></div>
<div class="panah-kiri"></div>
<div class="panah-kanan"></div>

CSS

idenya adalah sebuah kotak dengan lebar dan tinggi menjadi 0. Lebar dan tinggi dari sebenarnya panah ditentukan oleh lebar dari perbatasan. Dalam sebuah panah atas, misalnya, perbatasan bagian bawah diwarnai sedangkan kiri dan kanan yang transparan, yang membentuk segitiga.

.panah-atas {
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 5px solid black;
}

.panah-bawah {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid #f00;
}

.panah-kanan {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid green;
}

.panah-kiri {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent; 
 border-right:10px solid blue;
}

Contoh dengan arah dan ukuran:

atas : bawah: Kiri : Kanan :