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

境界線/アウトラインを使用して六角形を作成する

六角形は通常、境界線を設定することで擬似要素を使用して作成されるため、塗りつぶしの色と輪郭の両方を実現します。回避策の 1 つは、ネストされた六角形を使用して目的の効果をシミュレートすることです。

ライブ サンプル

[デモ リンク](ここにリンクを挿入)

HTML

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

CSS

1.六角形の形状とサイズを定義します

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

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

2.内側の六角形のスケールとカラー

<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. 2 番目の六角形をネストする

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

このレイヤー化アプローチにより、実際の六角形はネストされた三角形の境界線によって形成されているにもかかわらず、輪郭を持つ塗りつぶされた六角形の錯覚を作成できます。

以上がネストされた要素を使用して境界線のある塗りつぶされた六角形を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。