Cross-Browser Unique Shaped Link

Question

I'm working on a web app that will allow users to enter content and then submit it out to people's phones. It works like a charm, but I'm having some problem with the logo. The logo is the following:

I have a button on the left that is a different link, which is why we don't want the logo link to cover it up.

My first idea was to use a border-radius, but the angle at the bottom is too sharp for that. For example, if I use a border radius of: 0 0 75px 75px, it does the following:

So, if we make the angles bigger, let's say to: 0 0 100px 100px, it does the following:

(There's no difference.)

If I increase the bottom left, it pushes out the bottom right, and vice versa. I ended up doing the following because there's no link on the right side.

There's still a small, minor space on the left, but it's way better. Except now there's a big link on the right, which might bother the end user because there shouldn't be anything there.

So, we chose to use image maps and did the following:

And that works! ... kinda. The bottom left corner of the image now, above the red link, is a dead space. So, an alternative is we then make the bottom corner a different link. Let me illustrate.

That fixes that. Until the user scrolls. As you can see, the logo (and header) are fixed. The navigation is not. The following then happens.

I'm using jQuery so it won't be hard then to get the distance scrolled, compare it to what navigation item is in that area and change that section of the image map to match it... but I feel I'm overkilling this.

(And then, to top it off, different users have a different navigation...)

Do you know of a similar solution? Or am I stuck with image maps and jquery link changes?

Thanks a lot!

Edit: To confirm the "dead space" I was linking to, please review the image below:

Even though the image map is around the shield, the shield is still an image and has square corners, leaving the corners an unlinkable area, unless another image map is made for that area. I did that, but because the navigation scrolls, that linked area no longer matches the navigation below it. A border-radius on the image map would kind of fix the issue also, but I've gone with a different approach.

Hopefully that answers the question!

Answer 1

You might be able to revisit your CSS approach with this CSS3 badge shape technique:

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

The shape's not quite right, but with some adjustments it should work nicely.

Answer 2

To elaborate on my comment, you can add href links directly to the image map elements:

<img src="logo.jpg" usemap="#logo" border="0">
<map name="logo">
  <area shape="polygon" coords="[long list of coordinates]" href="www.mylink.com">
</map>

Not sure if I'm missing something in your example...