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

CSS3 で繰り返し六角形パターンを生成する

この記事では、Stack Overflow で提示された興味深い問題、つまり繰り返しパターンの作成について詳しく掘り下げます。 CSSを使用した六角形のパターン。画像でも十分ですが、ここでの目標は、純粋に CSS を使用してこの偉業を達成することです。

課題を理解する

ユーザーは、視覚的に魅力的な六角形のパターンを思い描きます。テキストや画像をその上に重ねます。主な課題は、各形状内の要素の配置を正確に制御しながら、六角形をシームレスに接続することにあります。

最初のアプローチ:

One単純なアプローチには、六角形の

を利用することが含まれます。ただし、この方法には制限があります。六角形が効果的に接続されません。繰り返しの六角形パターンを使用する他の試みは、コンテンツを特定の六角形に配置することを妨げます。

ブレークスルー: 擬似要素と正確な回転

これらの制限を克服するために、革新的な方法を導入します。単一の

に依存するアプローチ要素と擬似要素のペア。この手法では、背景画像を回転して、六角形間のシームレスな接続を実現します。

実装の詳細

1. 六角形の行:

   • を含む「行」を確立します。六角形グリッド
   • 六角形間の間隔に適切なマージンを定義します

2. 六角形構造:

   • 幅を使用三角関数から得られる高さと計算
   • 連続グリッドの「オーバーラップ」を作成するためのマージンを含めます
   • 必要な背景画像を適用します

3. 高さの調整奇数と偶数六角形:

   • 奇数の六角形を行に対して下に移動します
   • 偶数の六角形を上に移動して、千鳥状の効果を作成します

4. 六角形"Wings":

   • 2 つの子
     を使用します。 「翼」の要素
   • これらの要素を回転および配置して、六角形の独特の形状を作成します

   • 背景画像回転用の擬似要素:

     • 背景画像を「翼」に適用し、疑似要素
     • 疑似要素を回転させて背景画像を「回転解除」し、効果的に水平方向の翼を作成します

   • テキストの配置:

     • を追加します。各六角形内の要素でテキストを格納します
     • 垂直方向の配置とテキストの折り返しのための余白と行の高さを調整します

   • 追加のカスタマイズ:

     • 画像、テキスト設定、不透明度を変更して、特定の行または六角形を個別にスタイル設定します

   実装例

   提供されているフィドルは、この革新的な技術の実装を示しています。コードを試して外観を変更し、好みに合わせてパターンをカスタマイズします。

   さらなる機能強化

   このテクニックは、追加の追加によって拡張して、見事で複雑なパターンを作成できます。

   要素を使用したり、深さとインタラクティブ性を実現する 3D 変換を採用したりできます。