Question

i was checking out this excellent demo of drop down menus created with CSS, and i was curious, how does the author place those triangle arrows around the first li element of each menu?

i’m assuming it’s done w/ some :before or :after pseudo-element magic, and when i comment out the following lines of the CSS, they disappear:

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

but how does the author get them to be triangle shaped?

Answer 1

The last 3 lines do the trick:

border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;

mind that both width and height are 0, so all you see are the borders. More examples here.