CSS3 のみを使用して六角形の繰り返しパターンを作成するにはどうすればよいですか?

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 サイトの他の関連記事を参照してください。