css - 精确点击重叠的 div

Question

如果标题没有很好地解释它，我很抱歉，但这是我能想到的最好的标题来代表我的问题。

所以我有两个 div:

.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%;
}

我用它们来制作这样的布局:http://i.stack.imgur.com/htFRd.png

点击红色标记所在的位置将激活绿色钻石，而不是您点击的钻石。我想知道如何修剪图像/div 的那些看不见的部分，以便您实际单击 div 时看起来就像您正在单击一样。

Answer 1

网页上的所有元素本质上都是 block - 因此尽管您可以创建圆形或菱形等外观，但它实际上仍然是一个四边形 block 元素。

对于您的问题，您可以考虑使用图像映射:

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

或者可能使用 HTML5 CANVAS 方法:

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