CSS3 で六角形の繰り返しパターンを生成する
六角形はデザインで使用される一般的な形状であり、ウェブにユニークで視覚的に魅力的な要素を追加できます。ページ。画像を使用して六角形を作成することもできますが、CSS3 を使用して繰り返しの六角形パターンを作成することもできます。
基本的な六角形の作成
最初のステップは次のとおりです。 CSSを使用して基本的な六角形を作成します。これは、境界線と疑似要素を組み合わせて行うことができます。次の CSS コードは、黒い境界線と白い背景を持つ六角形を作成します。
.hexagon { width: 100px; height: 86.6px; border: 1px solid black; background-color: white; position: relative; } .hexagon:before, .hexagon:after { content: ""; position: absolute; border: 1px solid black; background-color: white; width: 50px; height: 50px; } .hexagon:before { left: -50px; top: 0; transform: rotate(60deg); } .hexagon:after { right: -50px; bottom: 0; transform: rotate(-60deg); }
パターンの繰り返し
基本的な六角形が作成されたら、パターンを作成できます。 n 番目の子セレクターを使用して繰り返すことができます。次の CSS コードは、六角形のパターンを水平方向の行に繰り返します。
.hexagon-row { display: flex; flex-direction: row; } .hexagon-row .hexagon { margin: 0 10px; }
パターンのカスタマイズ
六角形のパターンは、特定のニーズに合わせてカスタマイズできます。たとえば、六角形のサイズ、境界線の色、背景色を変更できます。六角形に画像やテキストを追加することもできます。
結論
CSS3 を使用すると、六角形の繰り返しパターンを簡単に作成できます。このパターンを使用すると、ユニークで視覚的に魅力的な要素を Web ページに追加できます。さまざまなカスタマイズ オプションを試して、ニーズに合ったパターンを作成してください。
以上がCSS3 のみを使用して六角形の繰り返しパターンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。