Concave Curve With only CSS,A Compound Shapes in CSS

Question

I have a CSS student and she is taking a CSS class, and her teacher asked her to create a shape using only CSS codes,without any implementation of an Image.

the shape is a Concave Curve, is this possible?

the shape looks like this:

Actually I wonder about the Power of CSS3 at this point,because I have read somewhere that is not possible to create a concave curve or other complex rounded shapes in CSS,and I appreciate imsky answer,but it's based on absolute positioning but,I need to know that is it possible to create such a shape without using positioning?

This article is about to show the creation of this kind of rounded shape using CSS,but it's not exactly the same shape,but it's useful for peoples whom interested.

Answer 1

Here you go: 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
}