Problem mit Hexagons und Text

[Gunnar Bittersmann]

@@Dari971

Ich habe 6 einzelne Hexgagone und sie dann so positioniert. Den Code habe ich von ihr: http://csshexagon.com/

Die bessere Variante, eine sechseckige Box zu erzeugen, bietet clip-path. Dann ist der Hover-Effekt auch nur dort, wo wirklich Sechseck ist, nicht auf dem umgebenden Rechteck.

Funktioniert mit polygon() in Chrome, Safari, Firefox Developer Edition. Im Firefox muss dazu das Flag layout.css.clip-path-shapes.enabled gesetzt sein; das wird voraussichtlich demnächst in Version 53 für alle freigeschaltet.

Beispiel

Mit SVG-ClipPath geht’s auch. Im Firefox auch heute schon.

LLAP 🖖