CSS Hexagon Generator

A hexagon that stays regular instead of squashed. The rule comes with the aspect ratio it needs, so the shape holds its proportions wherever you paste it.

About the CSS hexagon

A hexagon is six points on a circle, evenly spaced. That sounds like it should be easy to fake, and it is exactly why so many hexagons on the web are subtly wrong: they are drawn in a square box, which squashes them. A regular hexagon is taller than it is wide (or wider than tall, depending on which way up it stands), and if the box does not respect that, the sides stop being equal.

The rule this generator produces carries its own aspect-ratio, so the shape is regular wherever you paste it - in a grid cell, a flex row or a fixed-width card.

The code

.shape {
  aspect-ratio: 1 / 1;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  width: 240px;
  background: #0d6efd;
}

Those numbers are trigonometry, not guesswork. The six points sit on a circle inscribed in the box: the top and bottom vertices touch the edges at 50% 0% and 50% 100%, while the four side points land at cos(30°) of the half-width either side of centre - 6.7% and 93.3% - a quarter and three quarters of the way down.

That inset is why the box is square. The hexagon is already 2 / √3 taller than it is wide inside a square, which is exactly the proportion a regular hexagon has. You will see aspect-ratio: 1 / 1.1547 quoted in a lot of hexagon snippets, and it is right - but only for the other kind of hexagon polygon, the one whose side points touch the left and right edges. Apply it to this one and you stretch a correct shape into a wrong one.

Pointy-top or flat-top

Pointy-top - a vertex at the top and bottom, flat sides left and right, as above. This is the one that tessellates into vertical honeycomb columns.
Flat-top - the same hexagon turned 30 degrees: a flat edge top and bottom, points left and right. Use it for horizontal honeycomb rows and for hex avatars in a wide layout. It is inscribed in the same square box.
Hex badge - a softened hexagon with the top and bottom flattened, closer to a shield. Better for logos than for tiling.

Building a honeycomb

Tessellating hexagons is a layout problem rather than a shape problem. Give each cell the clip-path above, lay the cells out in a grid, then offset every other row sideways by half a hexagon and pull the rows together so they interlock: for pointy-top hexagons the vertical step is three quarters of the hexagon's height, not all of it. One thing to measure carefully - the hexagon is inscribed in its box, so it is a little narrower than the element it sits in. Space the rows and columns by the shape's own width and height rather than the box's, or the honeycomb comes out with gaps. Everything else - hover states, images, links - works as it would in any other grid.

Frequently asked questions

Why is my hexagon squashed?

Because it is in a box that is not the right shape. The polygon fills whatever it is given, so a square box produces a hexagon with unequal sides. Keep the aspect-ratio line in the rule, or set a matching width and height by hand.

Can I put an image inside a hexagon?

Yes - that is one of the things clip-path does better than the old three-div approach. Put the clip-path straight on the <img>, add object-fit: cover so the photo fills the box without distorting, and keep the aspect ratio.

How do I get a hexagon with rounded corners?

polygon() has no corner rounding at all, so there is no short answer. Two things work in practice: drop the hexagon into the studio and drag extra points in around each vertex to fake short arcs, or export it as SVG, where a path can round its corners properly. The filter: blur() plus contrast() trick also softens corners, but it affects the whole element and is hard to control to a specific radius.

Is a hexagon better as CSS or SVG?

CSS if it is a container - a card, an avatar, a grid cell - because the content inside stays real HTML. SVG if it is an icon or needs a stroke, a pattern fill or a border. The generator exports both from the same shape.

Menu