六角形で塗りつぶされた画像の背景を作成する CSS

今回は、CSS を使用して画像の背景で塗りつぶされた六角形を作成する方法を説明します。CSS を使用して画像の背景で塗りつぶされた六角形を作成するための注意事項は何ですか? 以下は実際的なケースです。

実際、六角形の実現原理は、以下の図に示すように、重なり合う 3 つの長方形を回転させることによって得られます。

正の六角形を得るには、2 つの長方形の回転角度は -60 度および 60 度でなければなりません。長方形のアスペクト比は Math.sqrt(3): 1 でなければなりません

次に、最初に 3 つの長方形を作成する必要があります:

    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

3 つの長方形の幅と高さをそれぞれ 60px と 104px に設定し、背景色を青に設定します。 .hexagonitem_left は -60 度回転、.hexagonitem_right は 60 度回転、.hexagonitem_center は回転しません。

      .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }
        .hexagonitem {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagonitem_left {
            transform: rotate(-60deg);
        }
        .hexagonitem_right {
            transform: rotate(60deg);
        }

このようにして、単純に正六角形を得ることができます。

それでは、どのようにして青い背景を画像に変えるのでしょうか?実際には、上記の 3 つの長方形は単に整形の役割を果たしているだけです。これを追加する必要があります。 3 つの長方形のそれぞれに長方形の子要素を追加し、それを Visibility:visible に設定します。

3 つのサブ要素の幅と高さは、前の青い六角形をちょうどカバーする必要があります。

コードは次のとおりです。注意深く勉強してください

    
    
    
    
    


    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

CSS の奇妙なボックス モデルと標準ボックス モデルを使用する方法

CSS を使用してアコーディオン レイアウトを実装する方法

以上が六角形で塗りつぶされた画像の背景を作成する CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。