Hyperlinking different parts of an element (like borders) to different links

In this fiddle : http://jsfiddle.net/peey/bbseQ/1/ , i have tried to hyperlink a triangle made by css (using this snippet), which is basically left border of an element.

In the fiddle, as you can see, the actual area which is hyper-linked includes the red area shown in the second shape.

I am looking for a method with which i can hyperlink only the visible area or the right border. I think it might be possible using jQuery or plain JavaScript or even some other JavaScript library, but I'm not sure how.

Also, is there any way that HTML image maps could be used with elements, because if they can be, the i can use them to define the area to be hyperlinked.

Thank you.

Here is the html code :

<body>
I just want to link green, visible area    
<a href="#"><div class="arrow-right"></div></a>
But the actual hyperlinked area includes red:
<a href="#"><div class="arrow-right"></div></a>

<style>
.arrow-right{
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;    
    border-left: 60px solid green;
}

a:last-child .arrow-right{
    background:red;
}
*{margin:10px;}
</style>
</body>

Solution

Your question is good, but to solve it, I used some Math.

Supposing this size of the border to be 60:

var v = 60;
$('a').on("click", function(event){
    var x = event.pageX - $(this).offset().left;
    var y = event.pageY - $(this).offset().top;
    if((x==y || x<y) && x<v && (x+y)<v*2) {
        console.log(x+" "+y);
    } else {
        console.log('out!');
        return false;
    }
});

The equation used for comparison will calculate if the click event is inside the arrow or not.

DEMO here: http://jsfiddle.net/bbseQ/9/

UPDATE: Works on Firefox too! Cheers :)