CODEWITHSUNDEEP
css
aaronstacy
aaronstacy

Reputation: 6428

Place triangle arrows around first elements in CSS menu

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?

Upvotes: 1

Views: 4050

Answers (2)

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

They are created using borders. Where borders meet they intersect at 45 degrees. So by making an element 0x0 pixels with large borders of different colours, you can make triangles. See this answer for a fuller explanation.

Upvotes: 4

Litek
Litek

Reputation: 4888

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.

Upvotes: 4

Related Questions