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.
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