Back to generator

Hexagon Divider Clip Path CSS

Hexagon Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

clip-path

Editable Shape

Output

Copy-ready CSS

Pure CSS

clip-path: polygon(25% 19%, 75% 19%, 100% 50%, 75% 81%, 25% 81%, 0% 50%);

Tailwind v4

[clip-path:polygon(25%_19%\,_75%_19%\,_100%_50%\,_75%_81%\,_25%_81%\,_0%_50%)]
Try it in the generator

When to use it

Hexagon Divider is a hexagon clip-path preset for interface shapes, cropped media blocks, section edges, and decorative CSS cuts. It uses 6 polygon points, which keeps the effect readable while still giving the element a custom silhouette. Hexagon Divider is an edge-forward crop for page dividers for CSS clip-path layouts. The preset is written as plain CSS, so it works with images, cards, gradient panels, and pseudo-elements without requiring SVG assets. Use it when a rectangular block feels too flat, or when a hexagon shape needs to guide attention across a page. Open it in the generator to drag individual vertices, switch templates, and copy the updated clip-path or Tailwind arbitrary value.

Hexpedia

Color reference

This clip-path preset is shape-only. Pair it with a color reference from Hexpedia when choosing a fill or background.

Explore more

More CSS Forge paths

Related

Similar clip paths

These presets share shape and layout tags with Hexagon Divider.