Wie erstelle ich mithilfe von CSS-Overlays ein Sechseck mit Rahmen und Füllung?

Erstellen eines Sechsecks mit Rahmen und Füllung

Hexecke werden üblicherweise mithilfe von CSS-Rändern durch Pseudoelemente erstellt. Während es nicht direkt möglich ist, ein Sechseck mit einer Farbe zu füllen und es mit einer anderen zu umranden, besteht ein alternativer Ansatz darin, mehrere Sechsecke miteinander zu überlappen.

Überlagerungsmethode

Durch das Überlagern von Sechsecken können Sie den gewünschten Effekt erzielen, ohne auf Bilder angewiesen zu sein. Das folgende Beispiel demonstriert diese Methode:

HTML:

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

CSS:

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    content: "";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}

.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}

.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

.hex.inner {
    /* Style inner hexagon */
    background-color: blue;
    transform: scale(.8, .8);
    z-index: 1;
}

.hex.inner:before {
    border-bottom: 60px solid blue;
}

.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

Dieser Code erstellt drei überlappende Sechsecke mit jeweils unterschiedlichen Farben und Z-Index Werte. Die Eigenschaft transform:scale() wird verwendet, um die Abmessungen der inneren Elemente proportional zu verringern und so einen Ebeneneffekt zu erzeugen.

Live-Beispiel

Sie können sich ein Live-Beispiel ansehen dieser Technik finden Sie hier: [Beispiel für einen sechseckigen Rahmen und eine Füllung](https://codepen.io/username/pen/wveBJp)

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS-Overlays ein Sechseck mit Rahmen und Füllung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!