A Modern way to create hexagon shapes

An easy and modern way to create Hexagon Shapes

• Only 2 CSS declarations
• No magic numbers
• A simple 4-point polygon for the clip-path

.hex {
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
}

.hex-alt {
  aspect-ratio: cos(30deg);
  clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
  /* Notice how I simply switched the x/y 
     of the previous polygon, easy! */
}

See the Pen CSS-only hexagon shapes (the modern way) by Temani Afif (@t_afif) on CodePen.

More CSS Shapes: css-shape.com

• Previous CSS Tip
• Next CSS Tip