0

I'm fairly new to css and javascript, but I've gone through a seemingly endless amount of hexagonal buttons here, and elsewhere on the web. My issue is that I have a hexagonal image, and I want to have a transparent hexagonal hitbox over top so that when I hover my mouse over the hexagon, it allows for it to be clicked. Every attempt so far has lead to the cursor changing outside the hexagon border (because the div/image is rectangular. The hexagon is positioned so that the top and bottom are flat, with vertices to the left and right. The transparent triangles in the corners of this image are also being registered as clickable. If anyone can give me some advice on how to go about doing this, that would be great.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Spencer DV
  • 1
  • https://css-tricks.com/examples/ShapesOfCSS/#hexagon – TylerH Mar 12 '15 at 13:52
  • 1
    I believe you are using borders to create your hexagon and you can't maintain the boundaries of the shape using that approach. Check this answer of mine, where I used an other approach to maintain the boundaries of the hexagons : [Responsive grid of hexagons](http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons/26116497#26116497) – web-tiki Mar 12 '15 at 13:55

0 Answers0