Wie kann ich sich wiederholende sechseckige Muster nur mit CSS3 erstellen?

Generieren Sie sich wiederholende sechseckige Muster mit CSS3

Dies ist eine bemerkenswerte Frage, die die Fähigkeiten von CSS3-Transformationen hervorhebt. Die Lösung besteht darin, ein einzelnes Div-Element zu verwenden, wobei zusätzliche untergeordnete Divs den linken und rechten Flügel des Sechsecks bilden. Das Hintergrundbild wird vererbt, während die Pseudoelemente das Bild drehen, um die Illusion vollständiger Sechsecke zu erzeugen.

Hier ist eine Aufschlüsselung der Technik:

• Definieren Sie die anfängliche Sechseckstruktur mit divs:
  `<div><div><span>Hex 1</span><div></div><div></div></div>
  <div><span>Hex 2</span><div></div><div></div></div>
  ...
  </div>`
• Verwenden Inline-Block und Set-Dimensionen; Passen Sie die Ränder an den gewünschten Abstand an.
• Das Hauptsechseck:
  `.hexrow > div {
  width: 100px;
  height: 173.2px;
  ...}
  `

• Drehen Sie die „Flügel“:
  `.hexrow &gt ; div > div:first-of-type {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow > div > div:last-of-type {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• Positionieren Sie die Pseudoelemente, um vollständige Sechsecke zu erstellen:
  `.hexrow > div > div:first-of-type:before {
  -ms-transform:rotate(-60deg) Translate(-150px, 0);
  -webkit-transform:rotate(-60deg) Translate(-150px, 0 );
  ...}

  `.hexrow > div > div:last-of-type:before {
  -ms-transform:rotate(60deg) Translate(100px, 86.6px);
  -webkit-transform:rotate(60deg) Translate(100px, 86.6px);
  ...`

• Text zum Bereich innerhalb hinzufügen Sechseck.

Diese Technik ermöglicht die präzise Platzierung von Text oder Bildern innerhalb der Sechsecke, indem sie auf bestimmte Elemente im „Hexrow“-Container abzielt.

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