Adding radius in center of div not corner

Question

I know html and css very well , i'm looking for something like this with css not with images ?
is there any trick that can do this with Css ?
HTML

<div id="zone-user-wrapper" class="zone-wrapper"></div>   

CSS

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
}

i made a fiddle

Thx

Answer 1

You can try something like this:

Fiddle

HTML:

<div class="zone-wrapper"></div>
<div id="shape"></div>

CSS:

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
}
#shape {
    height: 20px;
    background-color: white;
    border-top-left-radius: 5000px 300px;
    border-top-right-radius: 5000px 300px;
    top: -20px;
    position: relative;
}

<------------------------------------------------------------ Edit ------------------------------------------------------------->

Replicating the one on this website as you requested.

Here, I've added the border-top-left-radius: 4000px 150px and border-top-right-radius: 4000px 150px; to .content and .seperator. Then, gave appropriate z-index to all elements. .content has the highest z-index value, .zone-wrapper has the lowest z-index value and .seperator is in the middle.

<--------------------[ Fiddle | Full Screen Demo | With the Image from your website ]-------------------->

HTML:

<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>

CSS:

body {
    margin: 0 0;
}
.zone-wrapper{
    background: url(http://s25.postimg.org/4lur4kk23/pattern.png) repeat scroll 0 0 #01b888;
    height:180px;
    z-index: 0;
}
.seperator {
    height: 50px;
    background-color: #00533D;
    border-top-left-radius: 4000px 150px;
    border-top-right-radius: 4000px 150px;
    top: -47px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.content {
    top: -90px;
    position: relative;
    height: 800px;
    background-color: #93fbdf;
    border-top-left-radius: 4000px 150px;
    border-top-right-radius: 4000px 150px;
    z-index: 2;
}