Learn how to build a crisp CSS hexagon using a modern clip-path approach and the classic border-based trick, plus easy ways to center content and customize the look.
Live Preview: Hexagon
Method 1: Using clip-path
.hex-clip {
width: 150px;
height: 130px;
background: #cd5454;
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Method 2: Using Borders and Pseudo-elements
.hex-borders {
position: relative;
width: 120px; /* inner rectangle width */
height: 70px; /* inner rectangle height */
background: #cd5454; /* hexagon color */
}
.hex-borders::before,
.hex-borders::after {
content: "";
position: absolute;
left: 0;
width: 0;
border-left: 60px solid transparent; /* half of width */
border-right: 60px solid transparent; /* half of width */
}
.hex-borders::before {
bottom: 100%;
border-bottom: 35px solid #cd5454; /* top triangle height */
}
.hex-borders::after {
top: 100%;
border-top: 35px solid #cd5454; /* bottom triangle height */
}How This Works
The clip-path method clips a single box into a hexagon using a polygon of six percentage-based points. Because the shape is defined with percentages, it scales smoothly and the clickable area matches the visual hexagon.
The border method stacks a rectangle with two CSS border triangles (via ::before and ::after) to create the top and bottom points. It doesn’t truly clip inner content (text/layout remain rectangular). The pseudo-element triangles participate in hit testing, so the clickable area matches the visual hex, but the content box itself is still rectangular.
How to Center Content Inside a Hexagon
The easiest way is to turn the hexagon into a Flexbox or Grid container and center children with a couple of properties.
Method 1: Use CSS Flexbox
.hex-clip,
.hex-borders {
display: flex;
justify-content: center;
align-items: center;
}Method 2: Use CSS Grid
.hex-clip,
.hex-borders {
display: grid;
place-items: center;
}When to Use Each Shape Method
Use clip-path for a clean, single-element hexagon that scales easily, preserves the true hit area, and is simple to animate. Use the border/pseudo-element method for broader compatibility or when you can’t rely on clip-path; note that it’s less flexible for responsive sizing and doesn’t clip inner content.
Compatibility note: clip-path has broad support in modern browsers; prefer it unless you must support legacy browsers.
Quick Customizations
Change the color by swapping #cd5454 for any color or gradient; adjust size via width/height (or percentages) for clip-path and by tweaking the rectangle and triangle border sizes for the border method.
Hex-shaped shadows (correct approach)
– For clip-path hexagons: A regular box-shadow won’t create an outer, shape-following shadow on a clipped hex; it gets clipped/doesn’t render as expected. Use filter: drop-shadow(…) (or wrap the element and shadow the wrapper) to get a proper hex-shaped shadow.
– For border/pseudo-element hexagons: A box-shadow on the base element won’t cover the pseudo-element triangles. Use filter: drop-shadow(…) on the hex container (or apply equivalent effects to the pseudo-elements) for consistent shadows.
/* Clip-path hex with drop-shadow */
.hex-clip {
filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
/* Border/pseudo-element hex with drop-shadow on the container */
.hex-borders {
filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}Accessibility & SEO
If the hexagon is purely decorative, hide it from assistive tech (e.g., aria-hidden=”true”) and ensure sufficient color contrast when it contains meaningful text.