1

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?

aaronstacy
  • 6,189
  • 13
  • 59
  • 72

2 Answers2

4

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.

Litek
  • 4,888
  • 1
  • 24
  • 28
4

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.

Community
  • 1
  • 1
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290