凹面曲线只有CSS，CSS中的复合形状

Question

我有一名CSS学生，她正在参加CSS课程， 她的老师让她只使用CSS代码创建一个形状，而没有任何图像的实现。

形状是凹面曲线， 这有可能吗？

形状如下：

实际上我想知道CSS3的强大功能，因为我已经阅读过一些无法在CSS中创建凹曲线或其他复杂圆角形状的地方，我感谢imsky回答，但它基于关于绝对定位但是，我需要知道可以在不使用定位的情况下创建这样的形状吗？

This article即将展示使用CSS创建这种圆形形状，但它的形状并不完全相同，但它对感兴趣的人有用。

Answer 1

在这里：http://jsfiddle.net/XXbJ5/

HTML：

<div id="bg">
    <div id="bg-bottom"></div>
    <div id="top"></div>
    <div id="bottom"></div>
</div>

CSS：

#bg {
    width:200px;
    height:200px;
    overflow:hidden;
    position:relative
}
#bg-bottom {
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:50%;
    background:blue
}
#top {
    position:absolute;
    background:blue;
    top:0px;
    left:-100px;
    width:200px;
    height:200px;
    border-radius:100px
}
#bottom {
    position:absolute;
    background:white;
    top:0px;
    left:100px;
    width:200px;
    height:200px;
    border-radius:100px
}