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

CSS3 を使用して繰り返し六角形のパターンを生成する

これは、CSS3 変換の機能を強調する注目に値する質問です。この解決策には、単一の div 要素を利用し、追加の子 div が六角形の左右の翼を形成することが含まれます。背景画像は継承されますが、擬似要素は画像を回転させて完全な六角形の錯覚を作成します。

テクニックの内訳は次のとおりです:

• 次を使用して初期六角形構造を定義します。 divs:
  `
  16 進数1

  gt;

  
  

  16 進数2

  
  ...
  

  `
• を使用インラインブロックとセットディメンション。必要な間隔になるようにマージンを調整します。
• メインの六角形:
  `.hexrow > div {
  width: 100px;
  height: 173.2px;
  ...}
  `

• 「翼」を回転させる:
  `.hexrow > ;ディビジョン > div:first-of-type {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow >ディビジョン > div:last-of-type {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• 疑似要素を配置して完全な六角形を作成します:
  `.hexrow >ディビジョン > div:first-of-type:before {
  -ms-transform:rotate(-60deg) Translation(-150px, 0);
  -webkit-transform:rotate(-60deg) Translation(-150px, 0) );
  ...}

  `.hexrow >ディビジョン > div:last-of-type:before {
  -ms-transform:rotate(60deg) translation(100px, 86.6px);
  -webkit-transform:rotate(60deg) translation(100px, 86.6px);
  ...`

• 内のスパンにテキストを追加します。 hexagon.

この手法により、「hexrow」コンテナ内の特定の要素をターゲットにすることで、六角形内にテキストや画像を正確に配置できます。