Javascript 跨浏览器独特形状的链接

我正在开发一个web应用程序，它允许用户输入内容，然后将内容提交到人们的手机上。它像一个魅力，但我有一些问题的标志。标志如下：

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

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

所以，如果我们把角度变大，比如说：0，100px，100px，它会做以下的事情：

（没有区别。）

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

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

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

那就行了。。。有点。现在，图像左下角红色链接上方是死区。因此，另一种选择是，我们然后使底部的角落成为一个不同的链接。让我举例说明

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

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

（最重要的是，不同的用户有不同的导航…）

你知道类似的解决方案吗？还是我被图像映射和jquery链接更改所困扰

非常感谢

编辑：要确认我链接到的“死区”，请查看下图：

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

---

希望这能回答这个问题

要详细说明我的评论，您可以直接添加到图像地图元素的

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>

---

不确定我是否在您的示例中遗漏了什么…

您可以使用此CSS3徽章形状技术重新审视您的CSS方法：

---

形状不太正确，但经过一些调整，应该可以很好地工作。

我可以问一下为什么需要链接死区吗？当然，您可以将

href

从

img

标记中取出，并将其添加到所讨论的图像映射元素中？或者我遗漏了什么？你知道可以用斜杠语法设置两个单独的边界半径吗？例如，

边界半径：0 0 50px 50px/0 0 100px 100px

表示x半径为50px，y半径为100px。尝试使y半径大于x半径，你会得到一个更锐利的盾形（尽管仍然没有逐渐变细到底部的一点）。很抱歉延迟。这个周末我们在一个大型体育赛事上用这个，我不得不做其他事情。当我将盾牌周围的区域作为图像地图时，底角仍然在图像地图中，但它们没有链接，然后造成“死区”。我会附上一张照片。我选择了伊舍伍德的答案，但我非常感谢你的回答。乔丹，我知道这个语法。太酷了！谢谢我想OP是说盾牌根据滚动和布局移动，所以“死区”链接无法提前确定。也许。但是仍然有一种方法可以使用（更好支持的？）图像映射来实现它。作为旁注，如果OP回到他最受欢迎的问题上来，对他正在做的事情多了解一点，这会有所帮助……对不起。OP一直在忙着准备灰色杯。我选择了伊舍伍德的答案，但只是为了分类，我对我的问题进行了编辑，这样你们就能明白我的意思。谢谢！嘿，谢谢！这很有效。只有IE8不支持pseudo上的MX过滤器，Javascript不能旋转它们，因为它们实际上不是元素，但这确实解决了所有现代浏览器中的问题。谢谢

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