CSS wie geht das?

In der tat wäre eine Grafik die sinnvollste Lösung, aber wenn man es nun unbedingt mit CSS machen will und es in allen Browsern gut dargestellt werden soll, geht das natürlich auch: Ein weiteres HTML Element direkt unter der Box erstellen (z.B. div) und bei diesem nun mit der CSS Eigenschaft "border" rumspielen, sodass border-left, right und bottom dieselbe Farbe wie der Hintergrund haben, border-top aber die Farbe des gewünschten dreiecks (alle border gleich dick, z.B. 20px). Ich schiebe das HTML Element nun soweit zusammen (gibts mehrere möglichkeiten mit CSS) dass der rechte und linke border pixelgenau nebeneinanderstehen - dadurch sieht der obere Border nun aus wie ein Dreieck, das nach unten zeigt (wenn der Wert "solid" ist). Wenn wir nun wollen, dass es nach links-oben zeigt müssen wir die linke Hälfte verdecken. Das geschieht am geschicktesten indem ich es mit entsprechendem "z-index" unter die weiße box (siehe deine Grafik) lege und so positioniere, dass die rechte hälfte hervorschaut. Fertig :) Ich weiß, du wolltes den fertigen Code, aber da bin ich jetz bissi faul :) Einfach mit dem CSS-Border-Attribut eines neuen HTML Elements rumspielen (oder ne Grafik benutzen) dann bekommst das schon hin ;-)