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: https://i.sstatic.net/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.
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:
