CSS3 Shapes - Quadrat um Navigationselement legen

[cppnap]

Hallo,

ich habe eine Seitennavigation, die Jahreszahlen als Navigationselemente beinhaltet. Ich möchte bei dem aktuell aktiven Element eine quadratische Umrandung einbauen, wo die Jahreszahl im Zentrum steht.



Ich hoffe auf dem Bild kann man in etwa erkennen, wie ich mir das vorstelle

Meine Frage ist, wie ich das mit CSS am Einfachsten realisieren könnte. Ich habe mich zwar schon mit Shapes auseinander gesetzt, das Problem bei mir ist, dass bei der Drehung um 45° nicht nur die Box dargestellt wird, sondern eben auch die Jahreszahl mit gedreht wird.


vielen Dank schon mal

 

[Yuuri]

Pack den Text in nen eigenen Container und dreh den wieder zurück. Oder du packst Text und Box in einen Container auf die selbe Ebene und drehst nur die Box und positionierst diese entsprechend dem Text. Der erste Fall sollte sauberer sein und theoretisch ohne Probleme funktionieren.

 

[sverebom]

Du hast doch eine Liste mit Links, oder? Das Listenelement der aktuellen Jahreszahl als Block-Element definieren, mit einem Rahmen versehen und um 45° drehen. Den Link (also die Jahreszahl) drehst du dann einfach separat wieder zurück.