Bei QUOTE.fm nutze ich für kleine Dreiecke, wie zum Beispiel die Zipfel an Tooltips mittlerweile keine Grafiken mehr, sondern setze CSS ein. Das spart Arbeit, ist flexibler und verringert Daten, die geladen werden müssen.
Das Problem an dieser Technik ist allerdings, dass nur relativ kleine Dreiecke gut aussehen. Ab einer gewissen Größe, werden die Kanten zunehmend unansehnlich. Gleiches passiert auch bei Dreiecken, die entweder sehr flach oder sehr spitz sind.
Generell kann dem Problem zumindest in webkit Browsern (Safari, Chrome) mit einem kleinen Trick entgegen gewirkt werden: Das ganze Element einfach ein mal um 360° drehen. Ich verstehe nicht wieso es so ist, aber es ist so. Und dann frage ich auch einfach nicht länger nach.
Hier ein einfacher Vergleich. Oben ohne 360° Drehung, unten mit.
Und hier der passende Code:
<style type="text/css">
.triangle {
display: block;
margin: 0 0 20px 0;
width: 0;
height: 0;
border-top: 20px solid #008dcd;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
}
.reloaded {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<span class="triangle"></span>
<span class="triangle reloaded"></span>​
Ich habe euch das auch noch mal als jsfiddle angelegt, damit ihr ein bisschen rumtesten könnt.
