Wie erstellt man Sechsecke (Hexagone/ Waben) quadratisch mit HTML und CSS? Aber vor allem wie gelingt dies flexibel für beliebige Inhalte, responsiv für verschiedenste Bildschirmgrößen und kompatibel mit allen Browsern?
Die Formen, denen man im Web am meisten begegnet, sind Rechtecke. Wir zeigen in diesem Beitrag, wie man flexible Sechsecke einsetzen kann, um schicke und moderne Layouts zu entwickeln oder die Formsprache eines Designs mit Hexagonen umzusetzen.
Nachdem unser Hexagon später beliebige Inhalte, z.B. von einem Content-Management-System (CMS), beinhalten soll, verwenden wir statt vorgefertigten Grafiken einen Container (<div>) für die Form, den wir mit CSS anpassen. Damit wir diesen auch sehen können, verpassen wir ihm eine Hintergrundfarbe und Höhe. Soweit so gut. Aber erstmal haben wir jetzt ein Viereck - wie bekommt man also die anderen zwei Ecken noch dazu?
Dafür benutzen wir clip-path. Die CSS-Eigenschaft clip-path erstellt einen Freistellungsbereich, der festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb des Bereichs befinden, werden angezeigt, während die Teile außerhalb ausgeblendet werden. Mit der polygon() Funktion von clip-path können wir Punkte angeben, die ein Polygon definieren. Alles innerhalb des Polygons bleibt dann sichtbar, während alles außerhalb abgeschnitten wird.
Mit dem Online-Tool CSS Clip-Path Generator kann man so ein Polygon sehr schön erstellen, da man die angegebenen Punkte verschieben kann und das durch die Punkte aufgespannte Polygon direkt sieht.
So kommen wir auf das richtige Polygon für unseren clip-path und können diesen direkt einbauen:
.hexagon {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: #d51;
aspect-ratio: 1;
width: 33%;
}
Allerdings sehen wir dann, dass das Sechseck merkwürdig aussieht. Wir haben ein quadratisches Seitenverhältnis verwendet, doch irgendwie sind die Seiten unterschiedlich lang. Im Vergleich zu einem regulären Sechseck mit sechs gleich langen Seiten (blau) wird deutlich, dass unser Polygon (orange) zu niedrig ist:
Unser Sechseck muss also höher werden. Aber um wie viel?
Das können wir ausrechnen. Hierzu können wir uns ein Dreieck im Hexagon konstruieren (rot). Die Grundlinie des Dreiecks (die Strecke c) ist dann genauso lang, wie unser Hexagon hoch sein soll. Diese Höhe stellt die Hypotenuse dar und steht nach dem Kosinussatz im Verhältnis von cos(α) zur Ankathete b1. Der Winkel α ist ein 30°-Winkel, die beiden Seiten stehen also im Verhältnis cos(30°) ≈ 0,87.
In CSS können wir aber natürlich nur das Seitenverhältnis von Höhe und Breite der ganzen viereckigen Box festlegen. Wir brauchen also das Verhältnis der Strecke c zur Breite des Hexagons. Wenn wir uns allerdings nun ein zweites Dreieck (gelb) einzeichnen, welches gleichseitig ist und ebenfalls die Strecke zwischen den Punkten C und E als Seite hat, sehen wir folgendes: Die Seite b1 bzw. b ist genau so lang wie die Breite e1 des Hexagons. Damit ist das gesuchte Seitenverhältnis e1/c = cos(30°).
Das können wir direkt so in CSS einfügen, da die Kosinusfunktion cos() inzwischen auch schon relativ guten Browser-Support hat, siehe caniuse.com (knapp über 90% im April 2024).
.hexagon {
aspect-ratio: cos(30deg);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: #d51;
width: 33%;
}
Die Abbildungen wurden mithilfe der Software GeoGebra erstellt.
Übrigens geht der clip-path auch kürzer. Da Punkte auch außerhalb des Objektes platziert werden können, reichen für ein Sechseck auch vier Punkte aus:
clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0)
Die eben vorgestellte Lösung mit clip-path hat heutzutage guten Browser-Support (über 96%, Stand April 2024). Das war aber nicht immer so. Zwischen 2012 und 2020 wurde clip-path erst in den meisten Browsern hinzugefügt (vgl. developer.mozilla.org bzw. caniuse.com).
Davor musste man sich Sechsecke irgendwie anders bauen. Zum Beispiel mittels der CSS Eigenschaft transform.
Da diese Variante heutzutage nicht mehr viel Relevanz hat, verzichten wir hier auf eine detaillierte Erklärung. Ein kleines Beispiel zeigen wir trotzdem.
.hexagon {
position: relative;
padding-bottom: 38.105%; // = 33% / cos(30°)
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
&__content {
visibility: visible;
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
transform: skewY(-30deg) rotate(60deg);
}
}
Wir benutzen wieder das gleiche Seitenverhältnis, das wir bereits berechnet haben, allerdings diesmal mithilfe von block-padding (prozentuale Werte für oben und unten beziehen sich hierbei auf die Breite. Dadurch kann man es gut verwenden um Seitenverhältnisse ohne aspect-ratio umzusetzen).
Die Form erreichen wir durch Verzerrung und Rotation zweier ineinander verschachtelter Container. Es entsteht ein Parallelogram wie bei dem Hinweis zum clip-path mit 4 Punkten. Die herausragenden Spitzen verstecken wir mit visibility: hidden.
Eine Live-Demo kann in diesem Codepen ausprobiert werden: 👉🏻 https://codepen.io/netprofit/pen/dyEMJbK.
Dort ist der komplette Code enthalten, den wir bisher betrachtet haben, inklusive Kommentaren zur besseren Verständlichkeit.
Für manche Design-Elemente werden vielleicht nur einzelne Sechsecke benötigt - zum Beispiel bei dem Testimonial auf GZDN.de:
Allerdings bietet sich die Form von Sechsecken auch sehr gut an um eine Fläche damit zu tapezieren. So wie es auch die Bienen mit den Waben machen.
Dafür muss jede zweite Reihe um die halbe Wabengröße eingerückt werden. Absolute Positionierung wollen wir aber auf jeden Fall vermeiden. Außerdem soll das Layout responsive sein und je nach Bildschirmgröße unterschiedlich viele Waben pro Reihe beherbergen.
Zunächst verwenden wir float: left um die einzelnen Hexagone in eine Zeile zu bringen. Mit Media-Queries kann man dann je nach Bildschirmbreite unterschiedliche Größen für die Hexagone festlegen, sodass z. B. genau 3 oder 4 in eine Reihe passen.
Zum Einrücken können wir dann auf z. B. alle Hexagone in den geradzahligen Reihen die zusätzliche Transformation translateX(50%) anwenden. Auswählen kann man die betroffenen Hexagone mit CSS Selektoren, die :nth-child(...) verwenden. Für den Fall, dass man abwechselnd 3 oder 2 Hexagone in den Reihen hat (also insgesamt 5 Hexagone bis zur nächsten Einrückung), kann man die Reihen mit weniger (also 2) Hexagonen einrücken, indem man diesen CSS Selektor verwendet:
.hexagon:nth-child(5n+1),
.hexagon:nth-child(5n+2) {
....
}
Falls man den zweiten Ansatz zur Erzeugung von Sechsecken mittels Transformationen implementiert hat, muss man dabei aufpassen, dass man die Transformation nicht überschreibt (einfach nochmal zusammen mit translateX(50%) angeben).
Am Ende kann das dann zum Beispiel so aussehen:
Beim Code für ein derartiges Layout kann man sich zum Beispiel an folgendem Codepen orientieren: https://codepen.io/web-tiki/pen/wWGeEM
Jetzt wollen wir unsere Sechsecke aber endlich mit Inhalten füllen. In vielen Fällen kann man dabei genauso vorgehen wie bei normalen, rechteckigen Containern. Wenn man ein Symbol in die Mitte packt zum Beispiel. Oder eine Überschrift dazu. Oder einfach nur ein Hintergrundbild.
Will man allerdings mehr Text in das Hexagon einfügen, stößt man recht bald auf ein Problem: Um zu vermeiden, dass durch die sechseckige Form Text abgeschnitten wird, kann dieser nicht ganz bis zum Rand gehen. Also beschränkt man die Breite und/oder Höhe des Textes. Dadurch entsteht allerdings viel unnötiger Weißraum, der nicht nutzbar ist. Unabhängig vom Aussehen ist das auch ärgerlich, da der eh schon stark beschränkte Platz in der vordefinierten Form noch weiter verkleinert wird. (Siehe oranges Sechseck links)
Der gewünschte Textfluss soll sich jetzt aber an die Form anpassen. So wie beim blauen Hexagon rechts:
Diesen Effekt bekommt man mit einem kleinen Trick hin: CSS Shapes. Die CSS Shapes sind dafür da um geometrische Formen in float-Umgebungen anzuwenden. So kann Text auch um andere Formen als nur um Rechtecke fließen. Mithilfe der shape-margin kann man außerdem dafür sorgen, dass der Text immer einen fixen Abstand zur Form einhält. Der Browser-Support für CSS Shapes ist inzwischen auch gut, das sollte man ohne Probleme hernehmen können (siehe caniuse.com/css-shapes, 97% im Mai 2024).
Um den Text innerhalb des Sechseckes zu halten, muss die Form aber genau gegenteilig wie ein Hexagon geformt sein. So können wir den Text mit zwei Formen einmal von links (magenta) und einmal von rechts (gelb) beschränken. Die Form ist am Ende natürlich nicht sichtbar – sie bekommt einfach keine Hintergrundfarbe und bleibt damit transparent.
Definieren kann man die Formen mit der CSS Eigenschaft shape-outside (mehr Infos dazu auf css-tricks.com). Wir benutzen wieder die polygon Funktion, die wir schon von den clip-paths von vorher kennen. Der Clip-Path Generator von CSS Portal kann einem hier wieder helfen, um sich das Polygon besser vorstellen zu können. Letztendlich brauchen wir die folgenden zwei Polygone:
Für die linke Form (magenta):
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 99% 75%, 99% 25%);
Für die rechte Form (gelb)
shape-outside: polygon(100% 0, 1% 25%, 1% 75%, 100% 100%, 0 100%, 0 0);
Der Abstand zu den beiden Formen kommt durch die CSS Eigenschaft shape-margin: 1rem; auf beiden Polygonen.
Angeordnet werden die beiden Formen mithilfe von float. Beide haben grundsätzlich eine Höhe von 100% und eine Breite von 50%, sodass sie nebeneinander den ganzen Container abdecken. Das linke Element bekommt die Eigenschaft float: left, das rechte float: right. Danach kommt dann das Element mit dem Textinhalt. Dieses erhält 100% Breite und Höhe, füllt somit auch den ganzen Container aus und der in ihm enthaltene Text fließt innerhalb des übrigen Platzes, der von den beiden Polygonen abgegrenzt ist – also innerhalb unseres Hexagons.
Hier noch einmal der ganze Code zum kopieren:
<div class="hexagon">
<div class="shape-container">
<div class="shape-start"></div>
<div class="shape-end"></div>
<div class="v-center">
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
Und das dazu passende CSS:
.hexagon .shape-container {
height: 100%;
width: 100%;
}
.hexagon .shape-start, .hexagon .shape-end {
content: "";
display: block;
width: 50%;
height: 100%;
shape-margin: 1rem;
}
.hexagon .shape-start {
shape-outside: polygon(100% 0, 1% 25%, 1% 75%, 100% 100%, 0 100%, 0 0);
float: left;
}
.hexagon .shape-end {
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 99% 75%, 99% 25%);
float: right;
}
.hexagon .v-center {
width: 100%;
height: 100%;
margin: 0;
text-align: center;
}Der komplette Code inklusive Live Demo:
👉🏻 https://codepen.io/netprofit/pen/vYwGWoV
Natürlich ist man nicht auf Text beschränkt, sondern kann diesen auch mit Bildern oder Icons kombinieren:
Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.
Kommentare zu Hexagone/ Waben in CSS quadratisch umsetzen und anordnen