纯Css3写的花瓣效果

效果如图：

代码如下：如有不懂的，请留言！

Title
#box{position:relative; width:200px;margin:200px auto;}
#div{
border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(45deg);
position:absolute;top:-80px;z-index:20;
}
#div2{border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(-45deg);
position:absolute;left: -80px;z-index:20;}
#div3{
border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(-45deg);
position:absolute;left:80px;z-index:20;
}
#div4{border-radius:0px50%;
width:100px;
height:100px;background:red;
margin:50px auto;
transform:rotate(45deg);
position:absolute;top:80px;z-index:20;}
#div9{ border-left:10px solid green;
height:400px; position:absolute;
top:150px;left:45px;z-index:15;}
#div8{border-radius:0px50%;
width:100px;
height:100px;background:green;
margin:50px auto;
transform:rotate(0deg);
position:absolute;top:200px;
left:-45px;}
#div7{border-radius:0px50%;
width:100px;
height:100px;background:green;
margin:50px auto;
transform:rotate(90deg);
position:absolute;top:280px;
left:50px;}
#div5{
width:70px;
height:70px;background:yellow;position:absolute;z-index:21;border-radius:50%;top:60px;left:15px;overflow:hidden;box-shadow:0 0 50px yellow;}
#max{
width:250px;
height:100px;border-radius:50%;position:absolute;z-index:10;top:520px;
background:#ccc;left:-70px;
background:linear-gradient(#FFD39B,#FFE7BA)
}

css布局:

nnn.jpg