跨瀏覽器獨特的形狀鏈接

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

形狀不太正確，但通過一些調整它應該很好地工作。

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>

不確定我是否遺漏了你的例子......