html的div中心,html – 在div的中心添加半径而不是角

你可以尝试这样的事情：

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;

}