javascript - 跨浏览器独特形状的链接

Question

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

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

我的第一个想法是使用 border-radius，但底部的 Angular 太尖了。例如，如果我使用的边框半径为:0 0 75px 75px，它会执行以下操作:

因此，如果我们将 Angular 变大，假设为:0 0 100px 100px，它会执行以下操作:

(没有区别。)

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

左侧仍然有一个很小的空间，但已经好多了。除了现在右边有一个大链接，这可能会打扰最终用户，因为那里不应该有任何东西。

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

那行得通! ...有点。现在图像的左下角，红色链接上方，是一个死 Angular 。因此，另一种方法是我们将底 Angular 设为不同的链接。让我举例说明。

这解决了这个问题。直到用户滚动。如您所见， Logo (和标题)是固定的。导航不行。然后会发生以下情况。

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

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

您知道类似的解决方案吗？还是我受困于图像映射和 jquery 链接更改？

非常感谢!

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

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

希望这能回答问题!

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

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