CSS3 で六角形の境界線を実装するサンプルコード

一番外側の boxF は 120 度回転し、2 番目の boxS は -60 度回転し、3 番目の boxT は再び -60 度回転します。これで元の位置に戻り、3 番目のレイヤーの div 背景に画像が配置されます。最初の 2 つの div レイヤーには何もないので、六角形を取得するために回転するだけに使用されるため、1 番目と 2 番目の div レイヤーには visibility: hidden が設定されています。3 番目の div レイヤーは画像用であり、表示する必要があるため、 visibility: visible が設定されています。

回転後には必ず余分な部分ができるので、3 つの div すべてに overflow:hidden を設定します。回転して余分な部分を非表示にすると、必要な六角形が得られます。

知らせ：

1. 3 番目のレイヤー div に visibility: visible; を設定しない場合は、デフォルトで 2 番目のレイヤー div (boxS) の visibility: hidden; が継承されます。
2. div の幅と高さの比率は 4:5 である必要があります。そうでない場合、六角形にはなりません。

実施原則：

•transform: rotate(120deg); 画像の回転
•overflow:hidden; オーバーフロー非表示
•visibility: hidden; も hidden で、display:none; と似ていますが、違いは、非表示であっても、Web ページ上の位置を占める点です。

実装コード:

HTMLコード

<div class="boxF">
    <div class="boxS">
        <div class="boxT" style="背景画像: url(tupian.jpg);"></div>
    </div>
</div>

CSSコード

.boxF, 
.boxS, 
.boxT, 
。かぶせる {
 幅: 200ピクセル;
 高さ: 250px;
 オーバーフロー: 非表示;
}
.boxF, 
.boxS {
 可視性: 非表示;
}
.boxF {
 変換: 回転(120度);
 フロート: 左;
 左マージン: 10px;
 -ms-transform:回転(120度);
 -moz-transform:回転(120度);
 -webkit-transform: 回転(120度);
}
.boxS {
 変換: 回転(-60度);
 -ms-transform:回転(-60度);
 -moz-transform:回転(-60度);
 -webkit-transform: 回転(-60度);
}
.boxT {
 変換: 回転(-60度);
 背景: 繰り返しなし 50% 中央;
 背景サイズ: 125% 自動;
 -ms-transform:回転(-60度);
 -moz-transform:回転(-60度);
 -webkit-transform: 回転(-60度);
 可視性: 可視;
}

要約する

上記は、エディターが紹介した CSS3 で六角形の境界線を実装する方法のサンプル コードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。