CSS :Membuat Bidang Segitiga

16 Desember 10

Hem, ada banyak sekali bahasa CSS yang belum saya ketahui termasuk membuat bidang segitiga ini, dan baru saja saya mendapatkan ilmunya di CSS-TRICK. Teknik ini bisa digunakan dalam membuat bullet sebagai pengganti gambar atau lingkaran. Cekidot !

HTML

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

.arrow-up {        
width: 0;        
height: 0;        
border-left: 5px solid transparent;        
border-right: 5px solid transparent;        
border-bottom: 5px solid black;}
.arrow-down {        
width: 0;        
height: 0;        
border-left: 20px solid transparent;        
border-right: 20px solid transparent;        
border-top: 20px solid #f00;}
.arrow-right {        
width: 0;        
height: 0;        
border-top: 60px solid transparent;        
border-bottom: 60px solid transparent;       
border-left: 60px solid green;}
.arrow-left {        
width: 0;       
height: 0;        
border-top: 10px solid transparent;        
border-bottom: 10px solid transparent;         
border-right:10px solid blue;}

Ini dia hasilnya !

3 Balasan ke “CSS :Membuat Bidang Segitiga”

  1. Reza mengatakan:
    16 Desember 2010 pukul 10:18

    Hohoho… mantep mas, konsisten blogging terus? :D

    Balas
  2. rochsid tehape mengatakan:
    16 Desember 2010 pukul 10:21

    melepas stress za… kok blog kamu hibernate?

    Balas
  3. twid's mengatakan:
    11 Mei 2012 pukul 10:13

    tulisan anda sangat membantu…
    ^_^

    Balas

Tinggalkan Balasan