Membuat Bentuk Segitiga/Tanda Panah Triangle dengan CSS

Kali ini kita akan membahas mengenai gimana sih caranya bikin arrow atau tanda panah menggunakan css. Nah kita akan sama sama membuatnya, langsung aja kita masuk tahap pertama siapkan div untuk masing masing arrow.

HTML

<!--arrow ke atas-->
<div class="arrow-up"></div>
<!--//arrow ke bawah-->
<div class="arrow-down"></div>
<!--//arrow ke kiri-->
<div class="arrow-left"></div>
<!--//arrow ke kanan-->
<div class="arrow-right"></div>

Sebenarnya arrow itu sendiri terbentuk dari bentuk kotak yang memiliki width dan height 0. Kemudian lebar dan tingginya arrow yang kita buat tergantung dari lebar border yang kita atur di css nya. Seperti contoh kita membuat arrow ke atas, border-top (border bagian atas) kita beri warna dan kemudian border-left (border bagian kiri) dan border-right (border bagian kanan) kita biarkan transparan, maka akan membentuk segitiga dengan arah ke bawah.

CSS

.arrow-up {
 width: 0; 
 height: 0;   
 border-bottom: 20px solid #ff0000;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
}

.arrow-down {
 width: 0; 
 height: 0;  
 border-top: 20px solid #ff9900;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent; 
}

.arrow-right {
 width: 0; 
 height: 0;  
 border-left: 20px solid #33cc00;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent; 
}

.arrow-left {
 width: 0; 
 height: 0; 
 border-right: 20px solid #0099ff; 
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;   
}

Example

Nah selesai tutorial kali ini, kalian bisa memodifikasinya sesuai keinginan dan kebutuhan. Semoga bermanfaat guys, "happy coding"