Wie erstelle ich Sechsecke mit farbigen Rändern und Umrissen?

Erstellen von Sechsecken mit Rändern und Umrissen

Beim Erstellen sechseckiger Formen mithilfe von Rändern durch Pseudoelemente erweist sich die direkte Einbeziehung verschiedener Farben für die Füllung und den Umriss als bewährt herausfordernd. Es gibt jedoch eine praktikable Alternative: das Übereinanderlegen von Sechsecken innerhalb von Sechsecken.

Beispiel:

[Bild: Beispiel für Sechsecke mit farbigen Umrissen]

Live-Beispiel:

[Link zum Live-Sechseck-Beispiel]

HTML:

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

CSS:

Sechseckbasis:

<code class="css">.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    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;
}</code>

Innere Sechsecke:

<code class="css">.hex.inner {
    background-color: blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    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 {
    background-color: red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}</code>

Durch Überlagerung von Sechsecken verschiedener Farben Dieser Ansatz erzielt den gewünschten Effekt eines Sechsecks mit einem farbigen Rand und einer anderen Füllfarbe.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Sechsecke mit farbigen Rändern und Umrissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!