Hexagon shapes with rounded corners
We can create a hexagon shape using clip-path: polygon() but what about the rounded corners variation? It's now possible with the new clip-path: shape(). The code is more complex but you can easily control it using CSS variables.
.hexagon {
--r: 0.15; /* control the radius [0 1] */
--a: 30deg; /* control the rotation */
width: 280px;
aspect-ratio: 1;
clip-path: shape(/* a complex code but all you have to do is to update the above variables */);
}As a bonus we can animate the radius and also rotate the shape. Here is a demo with a cool hover effect.
See the Pen Rounded hexagon shapes with hover effect by Temani Afif (@t_afif) on CodePen.
⚠️ Chrome-only for now ⚠️
More CSS Tips
- Custom progress element using attr() Create a custom progress element with a dynamic coloration based on the value.
- Zig-Zag edges using CSS mask One line of code to add Zig-Zag edges to any element using the mask property.