ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して、異なる色の塗りつぶしと輪郭の両方を備えた六角形を作成するにはどうすればよいですか?

CSS を使用して、異なる色の塗りつぶしと輪郭の両方を備えた六角形を作成するにはどうすればよいですか?

DDD
DDDオリジナル
2024-11-01 10:46:02199ブラウズ

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

境界線と塗りつぶしのある六角形

次のコードは、単色の背景色と透明な境界線を持つ六角形を作成します。

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

異なる色の塗りつぶしと輪郭の両方を含む六角形を実現するには、別のアプローチが必要です。レイヤー化された六角形を使用する別の方法は次のとおりです。

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

この方法では、サイズが小さくなり、色が異なる 3 つのレイヤーの六角形が作成され、輪郭のある塗りつぶされた六角形の外観が得られます。

以上がCSS を使用して、異なる色の塗りつぶしと輪郭の両方を備えた六角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。