Cara membuat segitiga pada menu dropdown

by Unknown Last updated 12/09/2016

Tidak Ada Tanggapan

Gambar 1. Tampilan contoh segitiga menu dropdown

Simbol segitiga kerap muncul pada menu dropdown yang menandakan bahwa menu tersebut memiliki anak menu. Untuk membuat segitiga tersebut ternyata tidak sulit. Dengan menggunakan property border kita bisa membuat segitiga pada menu dropdown seperti yang diinginkan.

Kode HTML

<div class='panahbawah'></div>
<div class='panahkanan'></div>
<div class='panahatas'></div>
<div class='panahkiri'></div>

Style CSS

*{margin:0; padding:0;}

.panahbawah {
     width:0;
     height: 0;
     border:5px solid transparent;
     border-top:10px solid green;
           }

.panahkanan {
    width:0;
    height:0;
    border:5px solid transparent;
    border-left:10px solid orange;
            }

.panahatas {
    width:0;height:0;
    border:5px solid transparent;
    border-bottom:10px solid blue;
           }

.panahkiri {
    width:0;height:0;
    border:5px solid Transparent;
    border-right:10px solid red;
           }

Catatan:
Untuk diaplikasikan pada menu bar warna bisa diganti sesuai latar warna kontainer menu.

Demikian cara membuat segitiga pada menu dropdown semoga bermanfaat.