Question 44475 in Html Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    You can try clip-path like that:

    clip-path: ellipse(200px 500px at 50% 50%);
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search