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

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