Wie kann ich ein sich wiederholendes sechseckiges Muster nur mit CSS erstellen?

Erzeugen Sie sich wiederholende sechseckige Muster mit CSS3

In diesem Artikel befassen wir uns mit einem faszinierenden Problem, das auf Stack Overflow vorgestellt wird: dem Erstellen einer Wiederholung sechseckiges Muster mit CSS. Während Bilder ausreichen können, besteht das Ziel hier darin, dieses Kunststück ausschließlich mit CSS zu erreichen.

Die Herausforderung verstehen

Der Benutzer stellt sich ein visuell fesselndes Muster aus Sechsecken vor, das dazu in der Lage ist Text oder Bilder darüber schichten. Die größte Herausforderung besteht darin, die Sechsecke nahtlos zu verbinden und gleichzeitig die genaue Kontrolle über die Platzierung der Elemente innerhalb jeder Form zu behalten.

Erster Ansatz: Verwendung von

s

Eins Der unkomplizierte Ansatz beinhaltet die Verwendung von

s in Form von Sechsecken. Allerdings weist diese Methode eine Einschränkung auf: Die Sechsecke würden sich nicht effektiv verbinden. Andere Versuche, sich wiederholende Sechseckmuster zu verwenden, würden die Platzierung von Inhalten in bestimmten Sechseckformen behindern.

Ein Durchbruch: Pseudoelemente und präzise Rotation

Um diese Einschränkungen zu überwinden, führen wir eine Innovation ein Ansatz, der auf einem einzigen

Element gepaart mit Pseudoelementen. Bei dieser Technik wird das Hintergrundbild gedreht, um eine nahtlose Verbindung zwischen Sechsecken zu erreichen.

Implementierungsdetails

1. Sechseckreihe:

   • Erstellen Sie eine „Zeile“, die das Hex enthält Raster
   • Definieren Sie geeignete Ränder für den Abstand zwischen Sechsecken

2. Sechseckstruktur:

   • verwenden Sie Breite und aus trigonometrischen Berechnungen abgeleitete Höhe
   • Beziehen Sie Ränder ein, um eine „Überlappung“ für eine fortlaufende zu erzeugen Raster
   • Wenden Sie das gewünschte Hintergrundbild an

3. Höhenanpassung für ungerade und gerade Sechsecke:

   • Verschiebe ungeradzahlige Sechsecke relativ zur Reihe nach unten
   • bewege gerade Sechsecke nach oben und erzeuge ein gestaffelter Effekt

4. Hexagon „Flügel“:

   • zwei Kinder nutzen
     Elemente für die „Flügel“
   • drehen und positionieren Sie diese Elemente, um die eindeutige Form des Sechsecks zu erzeugen

   • Pseudoelemente für die Drehung des Hintergrundbilds:

     • Wenden Sie das Hintergrundbild auf die „Flügel“ und Pseudo an Elemente
     • drehen Sie die Pseudoelemente, um die Drehung des Hintergrundbilds aufzuheben, wodurch effektiv horizontale Flügel entstehen

   • Textplatzierung:

     • Fügen Sie einen Element innerhalb jedes Sechsecks, um den Text unterzubringen
     • Ränder und Zeilenhöhe für vertikale Ausrichtung und Textumbruch anpassen

   • Zusätzliche Anpassung:

     • Bestimmte Zeilen oder Sechsecke individuell gestalten, Bilder, Texteinstellungen und Deckkraft ändern

   Beispielimplementierung

   Die mitgelieferte Geige demonstriert die Umsetzung dieser innovativen Technik. Experimentieren Sie mit dem Code, um das Erscheinungsbild zu ändern und das Muster nach Ihren Wünschen anzupassen.

   Weitere Verbesserungen

   Diese Technik kann durch Hinzufügen weiterer Erweiterungen erweitert werden, um atemberaubende und komplexe Muster zu erstellen

   Elemente oder der Einsatz von 3D-Transformationen für Tiefe und Interaktivität.