Pfeil mit CSS erstellen

Mit dem border-Befehl lassen sich in CSS relativ einfach Pfeile erstellen. Dazu braucht man nichts weiter als drei HTML-Elemente und ein paar Zeilen CSS-Code.

Los geht’s mit dem HTML:

<div id="pfeil">
<div class="shape1"></div>
<div class="shape2"></div>
</div>

Dann das CSS:

#pfeil {
    width: 50px;
    height: 50px;
    position: relative;
    margin-left: 10px;
}
#pfeil .shape1, #pfeil .shape2 {
    border-width: 40px;
    border-style: solid;
    height: 0;
    width: 0;
    border-color: #000 transparent transparent transparent;
    top: 10px;
    position: absolute;
}
 
#pfeil .shape2 {
    top: 0px;
    border-color: #fff transparent transparent transparent;
}

Das Ergebnis:

Die Erklärung will euch natürlich nicht vorenthalten.
Im Grunde werden hier nur zwei Dreiecke erstellt – eins in schwarz und eins in weiß – und dann übereinander gelegt. Dadurch entsteht ein nach unten zeigender Pfeil, der ähnlich aussieht wie in einer Selectbox.
Die Dreiecke entstehen jeweils aus einem viereckigen Element ohne Höhe und Breite und mit einem 40 Pixel dicken Rahmen. Aber nur der obere Rahmen bekommt eine Farbe, alle anderen Seiten bleiben transparent. Dadurch entsteht die dreieckige Form.

Und die Demo dazu gibt es hier:
http://jsfiddle.net/pGanL/1/