Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich Sechsecke mit farbigen Rändern und Umrissen?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-01 04:49:02609Durchsuche

How to Create Hexagons with Colored Borders and Outlines?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn