使用纯CSS3绘制形状的问题

Question

请你看看This Demo，让我知道如何改变形状，如下图所示

这是我的CSS属性

#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>

由于

Answer 1

这不是您正在寻找的确切形状，但无论如何您都会从中找到它。

首先，为了制作这个形状，你需要超过1个形状，所以使用#shape之类的东西：在你的CSS之后可以做到这一点。

这是我用来创建类似形状的代码：

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;
}

这里也是一个小提琴：http://jsfiddle.net/x9dq2xn7/1/