Wie kann man mit CSS eine Sechseckform mit Rand erstellen?

Sechseckform mit Rand und Umriss

Das Erstellen einer Sechseckform mithilfe von CSS-Pseudoelementen ist eine bewährte Technik. Allerdings kann das direkte Hinzufügen eines Randes mit einer anderen Farbe eine Herausforderung sein. In diesem Artikel wird ein alternativer Ansatz untersucht, um den gewünschten Effekt zu erzielen.

Durch die Überlagerung mehrerer Sechsecke mit unterschiedlichen Größen und Farben ist es möglich, die Illusion eines umrandeten Sechsecks zu erzeugen und gleichzeitig die gewünschte Farbfüllung beizubehalten.

Beispielimplementierung

HTML:

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

CSS:

.hex {
    ...  /* Hexagon shape and basic styles */
}

.hex inner {
    background-color: blue;
    ...  /* Transform and scaling */
}

.hex inner2 {
    background-color: red;
    ...  /* Transform and scaling */
}

Funktionsprinzip:

Das äußerste .hex-Element definiert die Form und Farbe des Basissechsecks. Darin werden zwei verschachtelte .hex-Elemente hinzugefügt, jedes mit einer anderen Hintergrundfarbe. Durch die proportionale Skalierung dieser inneren Elemente mit transform:scale() werden sie verkleinert, während die Sechseckform beibehalten wird. Das Ergebnis ist eine Überlagerung verschiedenfarbiger Sechsecke, die den Eindruck eines umrandeten Sechsecks erwecken.

Live-Beispiel:

[Hexagon-Beispiel](https://www. example.com/hexagon-example/)

Alternativen:

Wenn Bilder keine Option sind, sind SVG, Canvas oder die Verwendung einer CSS-Maskeneigenschaft andere alternative Techniken .

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS eine Sechseckform mit Rand erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!