Issue on Drawing Shape Using Pure CSS3

Question

Can you please take a look at This Demo and let me know how I can change the shape tbe look like below image

and here is my CSS properties

#shape
{
    width: 500px;
    height: 350px;
    background: #EAD2BA;
    /*border-radius*/
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: auto;
    margin-top: 225px;
    margin-left: -20px;
}

body{padding:40px;}
#shape
{
	width: 500px;
	height: 350px;
	background: #EAD2BA;
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	margin-top: 225px;
	margin-left: -20px;
}

<section id="shape"></section>

Thanks

Answer 1

This is not the exact shape that you are looking for but you'll figure it out from this anyway.

first of all, to make that shape, you will need more than 1 shape, so using something like #shape:after in your css can do that.

here's the code that I used to create a similar shape:

body{padding:40px;}
#shape {
width: 20;
height: 0;
-webkit-border-radius: 50%;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid transparent;
border-top: 50px solid #EAD2BA;
position: relative;
}
#shape:after {
width: 473px;
height: 0;
-webkit-border-radius: 50%;
border-bottom: 100px solid #EAD2BA;
border-top: 100px solid transparent;
position: absolute;
content: "";
top: -100px;
left: -36px;
}

and here's a fiddle as well: http://jsfiddle.net/x9dq2xn7/1/