Create a curved div

Asked

Viewed 3,575 times

1

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.

inserir a descrição da imagem aqui

css

1 answer

4

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.