CSS オーバーレイを使用して境界線と塗りつぶしのある六角形を作成する方法

境界線と塗りつぶしを使用した六角形の作成

六角形は通常、疑似要素を介して CSS 境界線を使用して作成されます。六角形を 1 つの色で塗りつぶし、別の色で輪郭を描くことは直接可能ではありませんが、別の方法として、複数の六角形を相互に重ね合わせることができます。

オーバーレイ メソッド

六角形を重ねることで、画像に頼らずに思いどおりの効果を得ることができます。次の例は、このメソッドを示しています。

HTML:

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

CSS:

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    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;
}

.hex.inner {
    /* Style inner hexagon */
    background-color: blue;
    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 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

このコードは、それぞれ異なる色と Z インデックスを持つ 3 つの重なり合う六角形を作成します。価値観。 transform:scale() プロパティは、内部要素の寸法を比例的に縮小し、レイヤー効果を作成するために使用されます。

ライブ サンプル

ライブ サンプルを表示できます。このテクニックの詳細はこちら: [六角形の境界線と塗りつぶしの例](https://codepen.io/username/pen/wveBJp)

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