Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich mit CSS ein Sechseck mit einer Füllung und einem Umriss in verschiedenen Farben erstellen?

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

DDD
DDDOriginal
2024-11-01 10:46:02130Durchsuche

How can I create a hexagon with both a fill and an outline of different colors using CSS?

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!

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