Create a div with curve

Question

Create a div with curve

Navigation

#1 by (4 votes)

1

Good morning, I would like to know if it is possible and how to do div with this U curve up and down using only css , I tried in several ways and could not.

Thank you.

css

asked by anonymous 18.11.2016 / 12:36

1 answer

Bootstrap 3 - Spacing between inputs Error using PDO prepare () function [closed]

score 4 · Answer 1

I always recommend asking a question here, for some code, or a visual example with code in link 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%;
  }