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

网页上的所有元素基本上都是块 - 所以尽管你可以创建一个圆形或菱形等外观，但它仍然是一个四面块元素。

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

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

或者可能使用HTML5 CANVAS方法：

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

使用重叠的div精确点击

1 个答案: