Add radius to center of div, not corner

Question

I know html and css very well, am I looking for something like this with css and not with images?
is there a trick that can do this with css?
HTML

<div id="zone-user-wrapper" class="zone-wrapper"></div>   

CSS

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
}

i made fiddle

thank

Answer 1

You can try something like this:

Fiddle

HTML:

<div class="zone-wrapper"></div>
<div id="shape"></div>

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

<--------------------------------------------- ---- ----------- Edit ---------------------------------- ---- ----------------------->

Replication on this website at your request.

border-top-left-radius: 4000px 150px border-top-right-radius: 4000px 150px; .content .seperator. z- . .content z-index, .zone-wrapper z-index .seperator .

< -------------------- [Fiddle | Full Screen Demo | ----- --------------- >

HTML:

<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>

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

Answer 2

HTML

:

• HTML- — <header></header>

CSS

• :before :after

• 100%

• , .

• left: -20px padding-right: 20px overflow: hidden

: , , transparenttextures.com .

.

body {
  margin: 0;
}
header {
  background: url(http://i.stack.imgur.com/TIgas.png);
  height: 80px;
  position: relative;
  overflow: hidden;
}
header:after,
header:before {
  content: '';
  display: block;
  background: #FFF;
  height: 60%;
  width: 100%;
  position: absolute;
  border-radius: 100% 100% 0 0;
  top: 50%;
  left: -20px;
  padding: 0 20px;
  box-shadow: inset 0 0 2px #333;
}
header:before {
  background: #333;
  margin-top: -5px;
}

<header></header>

Answer 3

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
  border-radius: 40px 40px 40px 40px;
  overflow:hidden;
}

.zone-wrapper2{
  margin-top:10px;
  display:inlin-block;
    background: black;
    height:130px;
  border-radius: 40px 40px 40px 40px;
}

<div id="zone-user-wrapper" class="zone-wrapper">

<div id="div2" class="zone-wrapper2">


</div>
</div>

Answer 4

- (fooobar.com/questions/1563266/...):

<div id="header"> <div id="cover-left"></div> <div id="cover-right"></div> </div>

http://jsfiddle.net/p2hH7/215/

Answer 5

, 2 div. , - , border-radius. , 2.

Did the html code of your code help you. Added div to main header shell.

Check out the image below:

Hope this helps.