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

Generieren Sie sich wiederholende sechseckige Muster mit CSS3

Sechsecke sind eine häufig im Design verwendete Form und können einem Web ein einzigartiges und optisch ansprechendes Element hinzufügen Seite. Während es möglich ist, Bilder zu verwenden, um Sechsecke zu erstellen, ist es auch möglich, CSS3 zu verwenden, um ein sich wiederholendes sechseckiges Muster zu erstellen.

Erstellen des grundlegenden Sechsecks

Der erste Schritt besteht darin, Erstellen Sie die grundlegende Sechseckform mit CSS. Dies kann mit einer Kombination aus Rahmen und Pseudoelementen erfolgen. Der folgende CSS-Code erstellt ein Sechseck mit schwarzem Rand und weißem Hintergrund:

.hexagon {
  width: 100px;
  height: 86.6px;
  border: 1px solid black;
  background-color: white;
  position: relative;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  border: 1px solid black;
  background-color: white;
  width: 50px;
  height: 50px;
}

.hexagon:before {
  left: -50px;
  top: 0;
  transform: rotate(60deg);
}

.hexagon:after {
  right: -50px;
  bottom: 0;
  transform: rotate(-60deg);
}

Wiederholen des Musters

Sobald das grundlegende Sechseck erstellt ist, kann das Muster erstellt werden kann mithilfe des n-ten-Kind-Selektors wiederholt werden. Der folgende CSS-Code wiederholt das Sechseckmuster in einer horizontalen Reihe:

.hexagon-row {
  display: flex;
  flex-direction: row;
}

.hexagon-row .hexagon {
  margin: 0 10px;
}

Anpassen des Musters

Das Sechseckmuster kann an Ihre spezifischen Bedürfnisse angepasst werden. Sie können beispielsweise die Größe der Sechsecke, die Farbe der Ränder oder die Hintergrundfarbe ändern. Sie können den Sechsecken auch Bilder oder Text hinzufügen.

Fazit

Mit CSS3 ist es einfach, ein sich wiederholendes sechseckiges Muster zu erstellen. Dieses Muster kann verwendet werden, um einer Webseite ein einzigartiges und optisch ansprechendes Element hinzuzufügen. Experimentieren Sie mit den verschiedenen Anpassungsoptionen, um ein Muster zu erstellen, das Ihren Anforderungen entspricht.

Das obige ist der detaillierte Inhalt vonWie kann ich ein sich wiederholendes sechseckiges Muster nur mit CSS3 erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!