htmlcssfrontendbezierfigma

making top and bottom border curved in HTML and CSS

I am new to development. In figma design I have a div there where top border and bottom border are curved also there is arch in the center of top border of div. I have tried border radius but it does not give me the look like figma design.

Someone suggested me use svg path but it is very complex for me. Can someone suggest me better way of implementing it or svg code to implement this design.

Also I want this to be responsive for mobile screens and tab screens as well.

Figma design

enter image description here

I tried border radius but it does not give the look like figma.

Solution

  • Try this:

    .ellipse{ 
     height:400px;
     background:#f66;
     clip-path: ellipse(59% 50%);
     margin-top: 100px;
}
.arch { 
  height: 500px;
  background: #f66;
  margin-top: -500px;
}
.a1{ 
  clip-path: ellipse(45% 31%);
}
.a2{ 
  clip-path: ellipse(45% 32%);
}
.a3{ 
  clip-path: ellipse(45% 33%);
}
    <div class="ellipse">
</div>
<div class="arch a1">
</div>
<div class="arch a2">
</div>
<div class="arch a3">
</div>