Cross-Browser Unique Formatted Link

Question

I am working on a web application that will allow users to enter content and then send it to people's phones. It works like a charm, but I have problems with the logo. The logo is as follows:

I have a button on the left, this is another link, so we don’t want the logo link to close it.

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

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

(No difference.)

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

, , . , , , .

, :

!... . , , . , , . .

. . , ( ) . . .

jQuery, , , , , ... , .

( , , ...)

? jQuery?

!

: " ", , :

, , - , , . , , . , .

, !

Answer 1

, CSS- CSS3:

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>

, - ...