椭圆形底部的矩形

Question

是否可以创建一个与下面示例一样圆的扁平椭圆？

我已经看过几个关于如何使用CSS从以下来源创建椭圆本身的示例：

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

不幸的是，当你将它的高度调低时，椭圆形只是不想保持圆形。这是我目前的代码，关于我如何尝试获得与上图相同的视觉效果：

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

---

感谢大家在这里以及对未来任何人的帮助，这是我的最终代码：

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

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>

这就是你想要的

DEMO2

并按照下面的要求创建流畅的菜单，使用DEMO3

Answer 2

此形状的响应版本使用伪元素来最小化标记：

<强> DEMO

输出：

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 3

试试这个 CSS

div {
background-color: #80C5A0;
width: 400px;
height: 100px;
-webkit-border-radius:  100% 100% 100% 100% / 0% 0% 100% 100%;
 border-radius: 100% 100% 100% 100% / 0% 0% 100% 100%;
}

jsfiddle