色付きの境界線と輪郭を持つ六角形を作成するにはどうすればよいですか?

境界線と輪郭線を使用した六角形の作成

擬似要素を介して境界線を使用して六角形を作成する場合、塗りつぶしと輪郭線に異なる色を直接組み込むと、次のことがわかります。挑戦的。ただし、六角形の中に六角形を重ねるという実行可能な代替案があります。

例:

[画像: 色付きの輪郭を持つ六角形の例]

ライブサンプル:

[ライブヘキサゴンサンプルへのリンク]

HTML:

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

CSS:

六角形ベース:

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

内側の六角形:

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

異なる色の六角形を重ねることで、このアプローチでは、色付きの境界線と異なる塗りつぶし色を持つ六角形の望ましい効果が得られます。

以上が色付きの境界線と輪郭を持つ六角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。