DEV Community

Discussion on: Responsive hexagon grid without media query

Collapse
 
afif profile image
Temani Afif

That step is pretty easy using my code (like I detailed at the end). I am using empty divs so simply put any content you want inside and style it like you want ;) you can also catch hover and click events easily.

Collapse
 
kzqai profile image
Roy Ronalds

Usually with non-rectangular shapes on the web the problem becomes the clickability of the area. Circles, hexagons, diamonds, I’ve seen a lot of “click frustration” to them all where the visible shape does not map to the clickable link after using things like css ::before.

Far as a clickable demo, I’m on a phone, so it’s difficult to create a codepen example to see if the approach yields clickable links.

Visually arresting, regardless.

Thread Thread
 
afif profile image
Temani Afif • Edited

I am using clip-path, there is no pseudo element or complex trick and you will find no clickability issue. Try and see ;)
A trivial example is to add .container div:hover {background:blue} and you will see that the hover area fit the shape perfectly

Thread Thread
 
kzqai profile image
Roy Ronalds

Yeah, made an attempt before on a fork, but not really able to do much via mobile codepen.io/tchalvak/pen/ZEByQad