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

Taken from CSS-tricks. This is a neat solution however I'm not sure about the clicking part. Maybe you can use it to mask over what you have.

HTML:

CSS:

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

Source: http://css-tricks.com/snippets/css/css-triangle/