How is the caret on Twitter Bootstrap constructed?

Question

This is more of a curiosity question than something I really need to know.

On this page:

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

How is the little caret / down arrow thing constructed? Poking around with Firebug it looks like it's just made with transparent borders but ... I must be missing something.

Bootstrap is very cool. I just got it going with Symfony.

Answer 1

It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.

How to do it:

.foo:before {
    content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      border: 10px solid transparent;
      border-left-color: #333;
}

http://jsfiddle.net/fGSZx/

Here are some resources to help:

CSS Triangle from CSS-Tricks (this should clear everything up)

Smashing Mag article about :before and :after