CSS：矩形边向内圆

Question

如何创建圆形边（不是角落）以在内部圆形？ 我想过在它上面放一个白色的圆圈然后我觉得必须有一个更清洁的方式。

我尝试了这个，但它向外圆了：

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
}

它应该是这样的：

Answer 1

坦率地说，我认为我们需要使用另一个div来制作它，因为它不可能用css曲线化这样的div

请参阅以下代码：

<强> HTML

<div class="box">
    <div class="box1">
    </div>  
</div>

<强> CSS

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
    position:relative;
}
.box1 {
    background: white none repeat scroll 0 0;
    border-radius: 50% / 0.75em;
    bottom: -1px;
    height: 2em;
    position: absolute;
    width: 30em;
}

以上代码的fiddle示例正常工作：）