Beginilah cara membuat CSS triangle ( Segitiga ) dengan mudah

Advertisement

Advertisement

            Kita pastinya sering melihat sebuah website yang menggunakan elemen CSS Triangle ini, sebagai contoh adalah iklan10.com. Lihat pada halaman detail itemnya dan lihat pada bagian kanan sendiri di elemen harga, nanti anda akan melihat sebuah tanda lancip yang menunjuk ke kiri ( jika menggunakan desktop / tablet ), itulah contoh dari elemen Triangle tersebut .

Apa gunanya membuat elemen Triangle tersebut ? Apa fungsinya dan apa gunanya ?.

Bagi orang awam ( seperti saya ) hal tersebut merupakan hal yang biasa - biasa saja dan jika mengarah ke Web Designer bagian Kode maka hal tersebut sangat diperlukan sekali dalam pembuatan UI ( User Interface ) .

Sulitkah membuatnya ? Jelas tidak .

Kita hanya menggunakan sebuah kode Css Border sebagai pembuat aksinya dan sedikit pewarnaan border transparent, diikuti set height dan width 0 .

Sebagai contoh, kita memulai dengan kode CSSnya :

.kiri{
width:0;
height:0;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid red;
}

.kanan{
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid #0875d4;
}

.atas{
width:0;
height:0;
border-bottom:15px solid red;
border-left:15px solid transparent;
border-right:15px solid transparent;
}

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

Berikut kode HTMLnya :

<div class="kiri"></div>

<div class="kanan"></div>

<div class="atas"></div>

<div class="bawah"></div> 

Dan hasilnya :

Silahkan lakukan eksperimen dengan kode di atas, bisa anda ubah dan kreasikan dengan ilmu Pseudo Elemen CSS yang anda punya .

Semoga bermanfaat .

Advertisement

Advertisement