Bagaimana untuk Mencipta Heksagon yang Terisi dengan Sempadan Menggunakan Elemen Bersarang?

Buat Bentuk Heksagon dengan Sempadan/Langkaan

Bentuk heksagon biasanya dicipta melalui unsur pseudo dengan menetapkan sempadan, yang menjadikannya sukar untuk mencapai kedua-dua warna isian dan garis besar. Satu penyelesaian melibatkan penggunaan heksagon bersarang untuk mensimulasikan kesan yang diingini.

Contoh Langsung

[Pautan Demo](masukkan pautan di sini)

HTML

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

CSS

1. Takrifkan Bentuk dan Saiz Heksagon

<code class="css">.hex {
    /* Set width, height, fill color, and position */
}

.hex:before, .hex:after {
    /* Create triangular borders for the hexagon */
}</code>

2. Skala dan Warna Heksagon Dalam

<code class="css">.hex.inner {
    /* Scale the inner hexagon and set a new color */
}

.hex.inner:before, .hex.inner:after {
    /* Adjust triangle borders within the scaled hexagon */
}</code>

3. Nest a Second Hexagon

<code class="css">.hex.inner2 {
    /* Scale and color the second nested hexagon */
}

.hex.inner2:before, .hex.inner2:after {
    /* Set triangle borders within the second scaled hexagon */
}</code>

Pendekatan berlapis ini membolehkan anda mencipta ilusi heksagon terisi dengan garis besar, walaupun heksagon sebenar dibentuk oleh sempadan segi tiga bersarang.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Heksagon yang Terisi dengan Sempadan Menggunakan Elemen Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!