Wie kann ich mit CSS ein Sechseck mit einer Füllung und einem Umriss in verschiedenen Farben erstellen?

Sechseckform mit Rand und Füllung

Der folgende Code erstellt eine Sechseckform mit einer einfarbigen Hintergrundfarbe und einem transparenten Rand:

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

Um ein Sechseck mit einer Füllung und einem Umriss in verschiedenen Farben zu erhalten, ist ein anderer Ansatz erforderlich. Hier ist eine alternative Methode mit geschichteten Sechsecken:

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

<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;
}

.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>

Diese Methode erstellt drei Schichten von Sechsecken mit abnehmender Größe und unterschiedlichen Farben, wodurch das Aussehen eines gefüllten Sechsecks mit Umriss entsteht.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein Sechseck mit einer Füllung und einem Umriss in verschiedenen Farben erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!