Create a curved div

Question

Good morning, I wonder if it is possible and how to create a div with that U curve up and down using only css, I tried several ways and I couldn’t.

Thank you.

Answer 1

I always recommend asking a question here, for some code, or visual example with code on http://jsfiddle.net/ for example. It is interesting to show some effort.

My solution is this DEMO:

Html:

<div class="wrapper">
<div class="curve curve-top">
</div>
<div class="curve curve-bottom">
</div>
</div>

Css:

  div.wrapper {
      background-color:black;
       width:500px;
  }

  div.curve {
    background-color:white;
    width:500px;
    height:150px;
  }

  div.curve-top{   
      border-bottom-left-radius:70%;
      border-bottom-right-radius:70%;
  }

  div.curve-bottom {  
      margin-top: 50px;
      border-top-left-radius:70%;
      border-top-right-radius:70%;
  }