Question

我正在开发一个网络应用程序，允许用户输入内容，然后将其提交给人们的手机。它就像一个魅力，但我对徽标有一些问题。徽标如下：

enter image description here

我左边有一个不同的链接按钮，这就是为什么我们不希望徽标链接覆盖它。

我的第一个想法是使用边界半径，但底部的角度太尖锐了。例如，如果我使用的边界半径为：0 0 75px 75px，则执行以下操作：

enter image description here

所以，如果我们把角度做得更大，让我们说：0 0 100px 100px，它会做到以下几点：

enter image description here

（没有区别。）

如果我增加左下角，它会向右推出，反之亦然。我最终做了以下事情，因为右侧没有链接。

enter image description here

左边还有一个小的小空间，但它更好。除了现在右边有一个很大的链接，这可能会给最终用户带来麻烦，因为那里不应该有任何东西。

因此，我们选择使用图像映射并执行以下操作：

enter image description here

这很有效！ ......有点儿图像的左下角现在位于红色链接上方，是一个死角。因此，另一种方法是我们将底角设为不同的链接。让我来说明一下。

enter image description here

那就解决了这个问题。直到用户滚动。如您所见，徽标（和标题）是固定的。导航不是。然后发生以下情况。

enter image description here

我正在使用jQuery，因此滚动距离并不难，将其与该区域中的导航项进行比较，并更改图像映射的该部分以匹配它...但我觉得我这太过分了。

（然后，最重要的是，不同的用户有不同的导航......）

您知道类似的解决方案吗？还是我坚持使用图像映射和jquery链接更改？

非常感谢！

编辑：要确认我正在链接的“死角”，请查看下图：

enter image description here

即使图像映射在屏蔽周围，屏蔽仍然是图像并且具有方角，使角落成为不可链接的区域，除非为该区域制作了另一个图像映射。我做到了，但由于导航滚动，该链接区域不再匹配它下面的导航。图像地图上的边界半径也可以解决问题，但我采用了不同的方法。

希望能回答这个问题！

Answer 1

您可以使用此CSS3徽章形状技术重新访问CSS方法：

http://jsfiddle.net/isherwood/2v2wM

#shield {
    position: relative;
    width: 140px;
    height: 100px;
    background-color: navy;
    border-radius: 0 0 50px 50px;
    display: inline-block;
}
#shield:before, #shield:after {
    position: absolute;
    margin-top: 30px;
    content:"";
    left: 70px;
    top: 0;
    width: 70px;
    height: 115px;
    background: navy;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#shield:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}

形状不太正确，但经过一些调整后它应该可以正常工作。

Answer 2

要详细说明我的评论，您可以将href个链接直接添加到图片地图元素中：

<img src="logo.jpg" usemap="#logo" border="0">
<map name="logo">
  <area shape="polygon" coords="[long list of coordinates]" href="www.mylink.com">
</map>

不确定我的例子中是否遗漏了某些内容......

跨浏览器独特的形状链接

2 个答案: