The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Changing shape of hexagon to square when :hover
I saw this code pen of an octagon (wrongly called hexagon) turning into a square when hovered on. I wanna recreate that on a 300px sized hexagon, but I’ve had trouble knowing what exactly it is that makes the transformation.
This is the codepen: http://codepen.io/EdwinToh/pen/ktaxH
Thanks a lot!
Actually, it’s not changing shape at all.
What’s actually happening is that the internal (bubble) div is rotating. The reason you can’t see the ‘cut-off’ corners is due to the overflow being hidden on the parent div.
I’ve removed that and put a border on the parent so you can see what is actually happening.