It is necessary that there was such a div as in the picture. I tried through border-radius: 0% 0% 50% 50% / 0% 0% 40% 40%; But there are obtained the lower edges curved, and it is necessary as in the picture enter image description here

  • And what if what you get to put in <div style="position:parent"> , assign it absolute positioning and make it wider than the parent block and set overflow: hidden . - Makarenko_I_V
  • Can you show it in code? - Vanechka

3 answers 3

Like this

 div { width: 100%; height: 300px; margin: auto; background: red; -webkit-clip-path: ellipse(75% 47% at 52% 25%); clip-path: ellipse(75% 47% at 52% 25%); } 
 <div></div>

  • Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦
  • 3
    @Geyan, your code is not cross-browser. The example does not work at least in firefox, ie, edge. - mJeevas
  • one
    mJeevas one 100% cross-browser solution was shown a little lower with one voice and the author of the Umer answer, this solution is very good, the TC’s legs considered my answer as a solution, I don’t editors = 110 but I can draw on svg - user33274

I think you mean it? :)

 #main::before{ background-color: white; content: ''; position: absolute; z-index: -5; top: 50%; left: -20%; width: 180%; height: 100%; } #main::after{ background-color: #FFC107; content: ''; position: absolute; z-index: 2; left: -20%;; width: 140%; height: 100%; border-radius: 80%; } #main{ position: absolute; top: 50%; left: 50%; width: 50%; height: 100px; overflow: hidden; background: #ffc107; transform: translateX(-50%)translateY(-50%); } 
 <div id="main"></div>

    You can make a yellow block bigger so that the border-radius turns into a "hanging belly"

     body { overflow: hidden; } * { margin: 0; padding: 0; } div { background-color: yellow; width: 150%; margin-left: -25%; height: 300px; border-radius: 0 0 50% 50%; } 
     <div></div>

    • Your code does not work - Dmitriy Nail