css shapes - How can I create a concave bottom border in CSS?

Question

Content needs to be able to scroll behind it in the concave area and not be obscured. Specifically, I'm trying to create this:

Answer 1

For a transparent background, you can use box-shadows :

DEMO

Explanation :

The point of this technique is to use a pseudo element with box-shadows and a transparent backcground to see through it. The pseudo element is abolutely positioned and has a much larger width than the container in order to (with the help of border radius) give a smooth inset curve to the bottom of the div.

To make it simple : The background of the div is the box-shadow of the pseudo element.

The z-index values allow the content of the div to be dispayed over the shadow.

****** EDIT *************************

With content scolling behind the shape, you can see this DEMO

---

html,body{
    height:100%;
    margin:0;
    padding:0;
    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
div {
    background:none;
    height:50%;
    position:relative;
    overflow:hidden;
    z-index:1;
}
div:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:1300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px teal;
    z-index:-1;
}

<div>content</div>