Hover and click on CSS triangle

Question

I have a triangle with a javascript function that moves that image.

The issue is that the element has a square shape so click and hover state are triggered o

Answer 1

You should be able to just use an image map. Just create one poly that covers the triangle by setting the coords to (w/2, 0), (w, h), (0, h) where w and h are width and height. (Assuming an equilateral triangle like in your example. Otherwise just find the points with an image editor.)

Demo: http://jsfiddle.net/QXv2c/