Wie ist das Caret auf Twitter Bootstrap aufgebaut?

Question

Dies ist eher eine Frage Neugier als etwas, das ich wirklich wissen muss.

Auf dieser Seite:

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

Wie wird die kleine caret/Pfeil nach unten, was gebaut? Mit Firebug herumzustöbern sieht so aus, als wäre es nur mit transparenten Grenzen gemacht, aber ... Ich muss etwas vermissen.

Bootstrap ist sehr cool. Ich habe gerade mit Symfony angefangen.

Answer 1

Es ist nur mit Grenzen. Wenn Sie solche Pfeile sehen, hat der Entwickler höchstwahrscheinlich Pseudoelemente verwendet, um sie zu erstellen. Was passiert, ist, dass Sie eine transparente Box ohne Inhalt erstellen, und da dort nichts ist, sehen Sie nur die eine Ecke der Grenze. Das sieht praktisch wie ein Pfeil aus.

Wie es tun:

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

http://jsfiddle.net/fGSZx/

Hier einige Ressourcen helfen:

CSS Triangle from CSS-Tricks (dies sollte alles aufklären)

Smashing Mag article about :before and :after

Answer 2

Hier ist das CSS für ein nach oben gerichtetes Caret, basierend auf dem CSS von 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: ""; 
}