CSS Tip

A Modern way to create hexagon shapes

An easy and modern way to create Hexagon Shapes

CSS-only hexagon shapes

.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

More CSS Tips