CSS Dreiecke Reloaded

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.

Kommentare

    1. Ja schon! Sehr interessant. Im Firefox sehen beide Dreiecke immerhin gleich aus und die Schenkel des erste besser als im Chrome. Sowas ist echt ätzend.

  1. Wenn ich diese Seite hier mit einem mobilen Browser (Android) öffne, sehen beide nicht perfekt aus, also auch das gedrehte sieht leicht ausgefranst aus.

  2. Bei Transformationen wird die Hardwarebeschleunigung von Chrome aktiviert, die entsprechende Kantenglättung hat. Kann man bei mir ganz gut bei der Logo-Animation sehen, da gibt’s ein kurzes Flackern, während Chrome die Ansicht wechselt.

  3. Ist es bei Dreiecken in CSS3 nur möglich mit px zu programmieren oder gibt es auch eine möglichkeit zu sagen zB 80% des browserfensters?

    danke im voraus

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.