Kanten eckig machen mit CSS

[Christian Wansart]

Guten Morgen,

ich möchte gerne einen „direction aware hover effect“ bauen mit CSS. Einige fertige Lösungen im Netz sind mit JavaScript gemacht, was ich aber für unsinnig halte, wenn ich extra dafür JavaScript einbinden müsste.

Mein Ansatz wäre, dass ich eine Box erstelle, in dieser füge ich 4 Elemente – ich denke div dürfte sich da anbieten – Elemente an die vier Ränder ein und prüfe lasse je nach dem über welches Element man „rein kommt“, die entsprechende Animations-Richtung abspielen lassen.

Die weiße Fläche im Hintergrund ist die eigentliche Box. Dort soll der Inhalt und der MouseOver-Effekt hin. Die 4 rot, grün, blau und gelb gefärbten Ränder möchte ich für den MouseOver-Effekt nutzen.

Mein Problem ist, dass sich die 4 Ränder-Elemente überdecken können, also war meine Idee border-radius zu verwenden. Das funktioniert soweit auch ganz gut, jedoch wäre es schöner, wenn sie schön gerade aneinander abschließen würden, wie auf dem obigen Beispielbild.

Ist das mit border-radius oder einem anderen Element möglich? Wichtig ist, nicht, dass es optisch ist, sondern nur wegen dem MouseOver. Ich bin mir nicht sicher, ob es da andere CSS-Eigenschaften gibt, die mir das so ermöglichen.

Freundliche Grüße
Christian