Css 使用重叠div精确单击

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

所以我有两个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%;
}

我用它们来做这样的布局：

---

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

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

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

或者可能使用HTML5画布方法：

---

您考虑过图像地图吗？我已经考虑过使用画布和图像地图，并选择了图像地图，因为它似乎更符合我的要求。原来的问题是错误的钻石将被激活不再存在，但仍然有问题，它没有激活正确的钻石。使用我原来问题中的同一个例子，单击红点不会激活任何一颗钻石，我认为这是一个重叠问题，因为每个钻石周围仍然有透明的区域，但被视为图像的一部分。（1/2）有没有更好的方法让它确定应该单击什么，或者，我的最佳选择是在每个地图中为每个透明区域添加一个区域，以激活它看起来应该激活的内容？（2/2）我只能认为您没有像设置图像地图那样设置图像地图。您使用什么创建图像地图？我建议您使用dreamweaver，您应该能够准确地映射图像的每个部分。我已经在代码中做了类似于

，我将查看dreamweaver，看看它是否有帮助