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 :

0 comments:

Post a Comment

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top