CSSを使用して枠線のある六角形を作成するにはどうすればよいですか?

境界線と輪郭を備えた六角形

CSS 疑似要素を使用して六角形を作成することは、十分に確立された手法です。ただし、異なる色の境界線を直接追加するのは難しい場合があります。この記事では、目的の効果を達成するための別のアプローチを検討します。

さまざまなサイズと色で複数の六角形をオーバーレイすることにより、目的の色の塗りつぶしを維持しながら、境界線のある六角形の錯覚を作成することができます。

実装例

HTML:

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

CSS:

.hex {
    ...  /* Hexagon shape and basic styles */
}

.hex inner {
    background-color: blue;
    ...  /* Transform and scaling */
}

.hex inner2 {
    background-color: red;
    ...  /* Transform and scaling */
}

動作原理:

最も外側の .hex 要素は、基本六角形の形状と色を定義します。その中に、それぞれ異なる背景色を持つ 2 つのネストされた .hex 要素が追加されます。 transform:scale() を使用してこれらの内部要素を比例的にスケーリングすると、六角形の形状を維持しながら要素が縮小されます。結果は、異なる色の六角形のオーバーレイとなり、境界線のある六角形の外観を作成します。

ライブ例:

[六角形の例](https://www. example.com/hexagon-example/)

代替案:

画像がオプションでない場合、他の代替手法には SVG、Canvas、または CSS マスク プロパティの使用が含まれます.

以上がCSSを使用して枠線のある六角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。