Skip to main content
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.