CSS3 Zentrierung von Text im Dreieck

Question

Ich habe ein dreieckiges Bild in der linken oberen Ecke der Seite und einen Text, der unten darin zentriert werden muss (mit CSS3 transform: rotate ). Ich kann es mit einigen Positionierungen/Rändern machen, aber es sieht nicht in allen Browsern gleich aus, es erscheint ein wenig nach links oder rechts.

Gibt es eine Möglichkeit, sie so zu zentrieren, dass sie in allen Browsern gleichmäßig angezeigt wird?

Ich habe eine Beispiel . Hier verwende ich CSS, um das Dreieck zu erstellen, aber in Wirklichkeit verwende ich ein Bild.

Ich würde mich über Vorschläge freuen.

Answer 1

Wenn Sie die Basisbreite des Dreiecks kennen, dann setzen Sie width: des Textcontainers gleich der Basisbreite, text-align: center; und rotieren. Achten Sie nur darauf, dass der Mittelpunkt des Textcontainers auch der Mittelpunkt der Basis ist.

Nach einigen Berechnungen habe ich ein Beispiel erstellt: http://jsfiddle.net/VScFS/57/ . In Chrome und Firefox sieht es gleich aus.

Wie auch immer, ich denke, das Problem hängt mit der absoluten Positionierung zusammen.