ネストされた要素を使用して境界線のある塗りつぶされた六角形を作成する方法

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

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

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

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

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