Möchte man einen Banner über die Ecke einer Website verlaufen lassen, so kann man natürlich ohne Probleme mit einem Bild arbeiten. Wenn allerdings Text auf diesem Banner vorhanden ist und er auch als solcher ausgegeben werden soll, geht das natürlich nicht nur durch ein Bild. Anstelle dessen bietet sich das CSS3-Attribut transform an. In Verbindung mit dem Wert rotate(45deg) kann man wie im Beispiel den Text ohne Probleme um 45° drehen.
Nun kommt allerdings das eigentliche Problem, das in meinem Fall bei dieser Vorgehensweise und Positionierung des Banners aufgetreten ist: Der Browser (hier Firefox) zeigt die Drehung nur an, über Firebug ist aber zu sehen, dass das eigentliche Element noch horizontal ausgerichtet ist. Und da das Element nun über den Browserrand hinaus ragt, wird vom Browser ein horizontaler Scrollbalken angezeigt. Das kann nun aber ganz leicht behoben werden, indem man dem übergeordneten Element das Attribut overflow:hidden mitgibt.
Published by