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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #200877


    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:

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.