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.

Improve this question
2
  • css-tricks.com/examples/ShapesOfCSS/#hexagon Commented Mar 12, 2015 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 Commented Mar 12, 2015 at 13:55
Related questions
1655
How do I style a <select> dropdown with only CSS?
1470
Maintain the aspect ratio of a div with CSS
945
Stretch and scale a CSS image in the background - with CSS only
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.