Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Ich weiß nicht warum, aber UI gestaltet gerne Wabeneffekte (ausbreitende Hände)

1. Das Sechseck erkennen

Lassen Sie uns zunächst das Sechseck auf herkömmliche Weise analysieren.

Es kann in drei Rechtecke aufgeteilt werden, die jeweils um plus oder minus 60° gedreht werden, um die anderen beiden Rechtecke zu erhalten.

Daraus lässt sich die grundlegende HTML-Struktur gestalten

Die Breite und Höhe des Rechtecks ​​werden zuerst zufällig festgelegt. Anschließend wird ihre Beziehung berechnet, wenn Komponenten gebildet und durch Requisiten festgelegt werden.

Legen Sie dann den CSS-Stil fest

.w-comb { Hintergrundfarbe: #e4e4e4; Anzeige: Inline-Block; Position: relativ;
} .w-comb-sub1, .w-comb-sub2 { Hintergrundfarbe: #e4e4e4; Position: absolut; Breite: erben; Höhe: erben;
} .w-comb-sub1 { transform: drehen (-60 Grad);
} .w-comb-sub2 { transformieren: drehen (60 Grad);
}

Fertig ist ein Sechseck.

Dies ist jedoch nur die traditionelle Methode. Wenn Sie keine Kompatibilitätsprobleme haben , können Sie direkt den Clip-Pfad verwenden, um ein Sechseck zu zeichnen.

.w-comb { clip-path: polygon( 0 25 %, 50 % 0, 100 % 25 %, 100 % 75 %, 50 % 100 %, 0 75 % );
}

Ganz einfach und grob! Es werden keine untergeordneten Knoten oder Rotationen benötigt, nur eine Codezeile und Sie können das Sechseck mit nach Hause nehmen!

2. Größe festlegen

Das tatsächliche Anwendungsszenario besteht normalerweise aus einer Reihe von Sechsecken, sodass ein einzelnes Sechseck als Komponente verarbeitet werden muss

Die erste Frage ist, wie die Größe des Sechsecks festgelegt wird. Dazu sind Mathematikkenntnisse aus der Mittelschule erforderlich.

Nach der Berechnung beträgt die Breite (Seitenlänge a) des Rechtecks ​​bei einer Länge von x

Die Diagonale b ist

Dann können wir die Größe des Sechsecks angeben

Wenn es sich um eine traditionelle Lösung handelt, die durch Drehen von drei Rechtecken gebildet wird:

// Herkömmliche Lösung const RADICAL_3 = 1,7320508; const Comb = (props) => { const { className } = props; const width = props.size || 80; const height = Math.ceil(width / RADICAL_3); return ( <div className={`w-comb ${className}`} style={{ width, height, }}>
      <div Klassenname = {'w-comb-sub1'}></div>
      <div Klassenname = {'w-comb-sub2'}></div>
    </div> ) }

Wenn das Sechseck direkt mit clip-path gezeichnet wird :

// Clip-Pfad
const RADICAL_3 = 1,7320508; 
const Comb = (Eigenschaften) => {
                           const { Klassenname } = Requisiten;
                           const Breite = props.size || 80; const Höhe = 2 * Math.ceil(Breite / RADICAL_3); 
                           zurück ( <div Klassenname = {`w-comb-test ${className}`} Stil = {{ Breite, Höhe, }}></div>) 
			 }

3. Die Waben anordnen

Definieren Sie ein Abstandsfeld, um den Rand rechts festzulegen, und ordnen Sie dann eine Reihe von Sechsecken an

Beim Generieren der zweiten Zeile müssen Sie oben und links anpassen

links ist die halbe Länge des Rechtecks ​​( x ) (das ist der Basisversatz, der tatsächlich erforderliche Abstand wird zu dieser Zahl addiert)

Die Spitze ist die Hälfte der halben Länge der Sechseckseite (a) (Basisversatz)

Die Oberseite jeder nachfolgenden Zeile wird vergrößert, und „links“ wirkt sich nur auf gerade Zeilen aus.

4. Inhalte hinzufügen

Im traditionellen Schema stellt das horizontale Rechteck die Basis dar, sodass der Inhalt des Sechsecks direkt in das Rechteck geschrieben werden kann.

Damit ist dieser Artikel über Beispielcode zur Implementierung eines Waben-/Hexagonalatlas mit CSS abgeschlossen. Weitere relevante CSS-Hexagonalatlas-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!