Wie erstelle ich mithilfe verschachtelter Elemente ein gefülltes Sechseck mit Rand?

Erstellen Sie eine Sechseckform mit einem Rand/Umriss

Hexagonformen werden häufig durch Pseudoelemente durch Festlegen von Rändern erstellt, was dies schwierig macht sowohl eine Füllfarbe als auch einen Umriss erzielen. Eine Lösung besteht darin, verschachtelte Sechsecke zu verwenden, um den gewünschten Effekt zu simulieren.

Live-Beispiel

[Demo-Link](Link hier einfügen)

HTML

<code class="html"><div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div></code>

CSS

1. Definieren Sie die Form und Größe des Sechsecks

<code class="css">.hex {
    /* Set width, height, fill color, and position */
}

.hex:before, .hex:after {
    /* Create triangular borders for the hexagon */
}</code>

2. Innere Sechsecke skalieren und färben

<code class="css">.hex.inner {
    /* Scale the inner hexagon and set a new color */
}

.hex.inner:before, .hex.inner:after {
    /* Adjust triangle borders within the scaled hexagon */
}</code>

3. Ein zweites Sechseck verschachteln

<code class="css">.hex.inner2 {
    /* Scale and color the second nested hexagon */
}

.hex.inner2:before, .hex.inner2:after {
    /* Set triangle borders within the second scaled hexagon */
}</code>

Mit diesem mehrschichtigen Ansatz können Sie die Illusion eines gefüllten Sechsecks mit Umriss erzeugen, auch wenn das eigentliche Sechseck durch die Ränder der verschachtelten Dreiecke gebildet wird.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe verschachtelter Elemente ein gefülltes Sechseck mit Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!