How create an edge of a circular arc with div and css?

user_17624727 0
Viewed 220

I try to create an element like this one:

enter image description here

I can't create a piece of arc of a circle according to a diameter, by playing with the edge of the angles, it doesn't look how I wish. My result:https://codepen.io/yoan-dev/pen/rNJNPPN

.main {
  bottom: 0px;
  width: 100%;
  height: 70px;
  background-color: blue;
  border-top-left-radius: 100% 80px;
  border-top-right-radius: 100% 80px;
}
<a href="#">
  <div class="main"></div>
</a>

css html
3 Answers

You can try with border-top.

.main {
  bottom: 0px;
  width: 100%;
  height: 70px;
  background-color: white;
  border-top-left-radius: 100% 80px;
  border-top-right-radius: 100% 80px;
  border-top: 2px solid #ccc;  
}
<a href="#">
  <div class="main"></div>
</a>

user_148071110

You can easily achieve this by styling pseudo element :before or :after.

Here's the final result:

.main {
  bottom: 0px;
  width: 100%;
  height: 70px;
  overflow: hidden;
  position: relative;
}

.main::before{
  content: '';
  width: 120%;
  padding-bottom: 40%;
  background-color: blue;
  position: absolute;
  top: 0;
  left: -10%;
  border-radius: 50%;
}
<a href="#">
  <div class="main"></div>
</a>

user_94813870

You need to understand what border-top-left-radius and border-top-right-radius do. There is a good representation on this picture.

enter image description here

So if you match your height and the second value of those two properties, you will get the effect you are looking for.

.main {
  bottom: 0px;
  width: 100%;
  height: 40px;
  background-color: blue;
  border-top-left-radius: 50% 40px;
  border-top-right-radius: 50% 40px;
}
<a href="#">
  <div class="main"></div>
</a>

user_113641260
Related