Rectangle with oval bottom shape

Question

Is it possible to create a flat oval that is as round as the example below?

I've looked at several examples on how to create the oval itself using CSS from the following sources:

• http://css-tricks.com/the-shapes-of-css/
• http://jsfiddle.net/QGtzW/1/

Unfortunately, as you size it down in height the oval just doesn't want to retain the rounded shape. Here is my current code on how I'm trying to achieve the same visual look as the image above:

HTML

<ul>
<li>
<a href="#">
<span class="text">Home</span>
<span class="oval"></span>
</a>
</li>
</ul>

CSS

a {
    position: relative;
    padding: 10px 30px 0px 30px;
    text-transform: uppercase;
    background-color: red; color: #fff;
}
.text {
    position: relative;
    z-index: 1;
}
.oval {
    position: absolute;
    bottom: -8px; left: 0;
    z-index: 0;
    display: block;
    width: 100%; height: 20px;
    border-radius: ~"20px/10px"; /* I'm using LESS and it requires ~"" to make it work */
    background-color: red;
}

---

As a thank you for everyone here and as help for anyone in the future, here is my final code:

HTML

<ul>
    <li>
        <a href="#">Home</a>
    </li>
</ul>

CSS

a {
        overflow: hidden;
    position: relative;
    padding: 10px 30px 20px 30px;
    text-transform: uppercase;
    color: #fff;

    &:before {
        content: '';
        position: absolute;
            top: 0; left: -25%; bottom: 4px;
            z-index:-1;
        width: 150%;
        border-bottom-left-radius: 100%;
            border-bottom-right-radius: 100%;
        background-color: #AECE33;
            border: 3px solid #6B6A65; border-top: 0;
    }
}

Answer 1

Here is a responsive version of this shape using a pseudo element to minimize markup :

DEMO

Output :

HTML :

<div>Home</div>

CSS :

div {
    position:relative;
    width:40%; height:100px;
    overflow:hidden;
    margin:10px auto;
    text-align:center;
    font-size:1.8em;text-transform:uppercase;line-height:90px;color:#fff;
}
div:before {
    content:'';
    position:absolute;
    top:0; left:-25%; bottom:4px;
    width: 150%;
    background-color: #AECE33;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border:4px solid #6B6A65;
    border-top:0;
    z-index:-1;
}

Answer 2

DEMO1

.cover{ height:100px; width:300px; overflow:hidden;}
.set {
    background-color: #80C5A0;
    width: 400px;
    height: 100px;
    margin-left:-50px;
    border-radius: 50% / 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

<div class="cover">
    <div class="set"></div></div>

and this is what you want

DEMO2

and for creating a fluid menu as you asked below use DEMO3