Danke, lange nach gesucht und so einfach geht es :/
CSS: Dreiecke mit CSS-Border


HTML-Markup
CSS-Code
div {
border-color:DarkGreen Orange Yellow GreenYellow;
border-style:solid;
margin:15px;
float:left;
}
#nr1 {
height:50px;
width:50px;
border-width:20px;
}
.arrows {
height: 0;
width: 0;
border-width:45px;
}
#nr3 {
border-right-width:0;
}
#nr4 {
border-right-width:0;
border-color:transparent transparent transparent GreenYellow;
}
Hier kann man sich das funktioniere Beispiel ansehen. Zusammen mit der foo:after { content: DREIECKSBOX }
kann man sich so auch boxen mit Pfeilen zusammenbasteln. Einen Nachteil hat das Ganze allerdings noch. Will man dem Element einen CSS-Box-Shadow geben, so hat dieser die Form des Quadrates. Schade, eigentlich.
Anwendung

Kommentare
Super Tutorial, danke! Hat mir sehr gut geholfen, um eine Art Sprechblase zu machen!