你可以尝试这样的事情:
Fiddle
HTML:
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;
}
< ———————————————— ————编辑————————————- ————————>
根据您的要求复制website上的那个.
在这里,我添加了border-top-left-radius:4000px 150px和border-top-right-radius:4000px 150px;到.content和.seperator.然后,为所有元素提供适当的z-index. .content具有最高的z-index值,.zone-wrapper具有最低的z-index值,而.seperator位于中间.
< -------------------- [Fiddle | Full Screen Demo | With the Image With the Image] ——————–>
HTML:
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;
}