【发布时间】：2013-12-04 20:33:33
【问题描述】：
我正在开发一个网络应用程序，该应用程序允许用户输入内容，然后将其提交到人们的手机上。它就像一个魅力，但我的标志有一些问题。标志如下：
我在左侧有一个按钮，它是一个不同的链接，这就是我们不希望徽标链接覆盖它的原因。
我的第一个想法是使用边界半径，但底部的角度太尖了。例如，如果我使用的边框半径为：0 0 75px 75px，它会执行以下操作：
因此，如果我们将角度变大，假设：0 0 100px 100px，它会执行以下操作：
（没有区别。）
如果我增加左下角，它会推出右下角，反之亦然。我最终做了以下操作，因为右侧没有链接。
左边还有一个很小的空间，但要好得多。除了现在右边有一个大链接，这可能会打扰最终用户，因为那里不应该有任何东西。
所以，我们选择使用图像映射并做了以下事情：
这行得通！ ……有点。现在图像的左下角，在红色链接上方，是一个死角。因此，另一种方法是我们将底角设为不同的链接。让我举例说明。
这解决了这个问题。直到用户滚动。如您所见，徽标（和标题）是固定的。导航不是。然后会发生以下情况。
我正在使用 jQuery，因此滚动距离并不难，将其与该区域中的导航项进行比较，并更改图像地图的该部分以匹配它......但我觉得我这有点过头了。
（然后，最重要的是，不同的用户有不同的导航......）
您知道类似的解决方案吗？还是我被图像映射和 jquery 链接更改卡住了？
非常感谢！
编辑：要确认我链接到的“死区”，请查看下面的图片：
即使图像映射在盾牌周围，盾牌仍然是一个图像并且有方角，使角落成为不可链接的区域，除非为该区域制作另一个图像映射。我这样做了，但是由于导航滚动，该链接区域不再与它下面的导航匹配。图像地图上的边界半径也可以解决问题，但我采用了不同的方法。
希望能回答这个问题！
【问题讨论】：
-
请问您为什么需要链接死区？当然，您可以从
img标签中取出href并将其添加到相关的图像映射元素中？还是我错过了什么？ -
你知道可以用斜线语法设置两个单独的边框半径吗？例如。
border-radius: 0 0 50px 50px / 0 0 100px 100px用于 50 像素的 x 半径和 100 像素的 y 半径。试着让 y 半径大于 x 半径，你会得到一个更锐利的盾牌形状（尽管仍然没有逐渐变细到底部的一点）。 -
抱歉耽搁了。这个周末我们要用它来举办一场大型体育赛事，我不得不完成其他事情。当我将盾牌周围的区域作为图像映射时，底角仍在图像映射中，但它们没有链接，然后造成“死区”。我会附上一张图片。我选择了伊舍伍德的回答，但我很感激你的回答。乔丹，我确实知道这种语法。这个很酷！谢谢！
标签： javascript jquery html css image