I architect applications professionally, but then for some reason I come home and do game development. Let’s chat about amplify, or game development, or AWS.
I’ve actually been wanting to set up a hexagon grid for a browser-based-game. One thing to consider is making the hexagons clickable or having content inside. I think either of those are the next big step to moving the approach from visually beautiful onwards to “functional” interactable content that people need.
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.
I architect applications professionally, but then for some reason I come home and do game development. Let’s chat about amplify, or game development, or AWS.
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.
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
I architect applications professionally, but then for some reason I come home and do game development. Let’s chat about amplify, or game development, or AWS.
I’ve actually been wanting to set up a hexagon grid for a browser-based-game. One thing to consider is making the hexagons clickable or having content inside. I think either of those are the next big step to moving the approach from visually beautiful onwards to “functional” interactable content that people need.
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.
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.
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 perfectlyYeah, made an attempt before on a fork, but not really able to do much via mobile codepen.io/tchalvak/pen/ZEByQad