跨浏览器独特的形状链接

Question

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

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

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

所以,如果我们使角度更大,让我们说:0 0 100px 100px,它执行以下操作:

(没有区别.)

如果我增加左下角,则向右推动,反之亦然.我最终做了以下事情,因为右侧没有链接.

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

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

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

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

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

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

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

非常感谢!

编辑:要确认我链接的"死角",请查看下图:

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

希望能回答这个问题!

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

形状不太正确,但通过一些调整它应该很好地工作.