css - 使用纯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

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

首先，要制作该形状，您将需要多个形状，因此在 CSS 中使用类似 #shape:after 的内容就可以做到这一点。

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

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

这里还有一个 fiddle :http://jsfiddle.net/x9dq2xn7/1/