How Can I Create Repeating Hexagonal Patterns Using Only CSS3?

Generate repeating hexagonal patterns with CSS3

This is a remarkable question that highlights the capabilities of CSS3 transformations. The solution involves utilizing a single div element, with additional child divs forming the left and right wings of the hexagon. The background image is inherited, while the pseudo-elements rotate the image to create the illusion of complete hexagons.

Here's a breakdown of the technique:

• Define the initial hexagon structure using divs:
  `
  Hex 1

  
  

  Hex 2

  
  ...
  
  `
• Use inline-block and set dimensions; adjust margins for desired spacing.
• The main hexagon:
  `.hexrow > div {
  width: 100px;
  height: 173.2px;
  ...}
  `

• Rotate the "wings":
  `.hexrow > div > div:first-of-type {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow > div > div:last-of-type {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• Position the pseudo-elements to create complete hexagons:
  `.hexrow > div > div:first-of-type:before {
  -ms-transform:rotate(-60deg) translate(-150px, 0);
  -webkit-transform:rotate(-60deg) translate(-150px, 0);
  ...}

  `.hexrow > div > div:last-of-type:before {
  -ms-transform:rotate(60deg) translate(100px, 86.6px);
  -webkit-transform:rotate(60deg) translate(100px, 86.6px);
  ...`

• Add text to the span within the hexagon.

This technique enables precise placement of text or images within the hexagons by targeting specific elements in the "hexrow" container.

The above is the detailed content of How Can I Create Repeating Hexagonal Patterns Using Only CSS3?. For more information, please follow other related articles on the PHP Chinese website!