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

Answer 2

Here is the CSS for an upward facing caret, based on the CSS from bootstrap:

.caret-up {
  display: inline-block;
  width: 0px;
  height: 0px;
  margin-left: 2px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 4px solid #FFFFFF;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top-width: 0px;
  border-top-style: dotted;
  content: "";
}