Precise clicking with overlapping divs

Question

I'm sorry if the title doesn't explain it well enough, but it's the best title i could think of to represent my question.

So I've got two divs:

.div-arrow
{
    position: absolute;
    float: left;
    cursor: pointer;
    display:block;
    width: 136px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
    zoom: 50%;
}

.div-diamond
{
    position: absolute;
    float: left;
    cursor: pointer;
    display: block;
    width: 83px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
    zoom: 50%;
}

And I use them to make a layout like this: http://i.stack.imgur.com/htFRd.png

Clicking where the red mark is will activate the green diamond, instead of the diamond it looks like you're clicking. I was wondering how I go about trimming those unseen sections of the image/div, so that you actually click the divs it looks like you're clicking.

Answer 1

All elements on a web page are essentially blocks - so although you may create the look of a circle or a diamond etc it's still really a four sided block element.

For your problem you could consider either using an image map:

http://www.w3.org/TR/html401/struct/objects.html

Or possibly using the HTML5 CANVAS method:

https://developer.mozilla.org/en-US/docs/HTML/Canvas