3

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>
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
Yoan Bousquet
  • 59
  • 5

3 Answers3

0

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>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
0

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>
RedRex
  • 311
  • 1
  • 5
-1

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>
Sanlyn
  • 139
  • 1
  • 12
  • actually since his reference circle is wider than the portion visible he should try with a value at least 2x greater than element's width I think – Apolo May 02 '22 at 07:37
  • the lower the first value (the width) of border-top-left/right-radius property is the bigger the slope will be. – Sanlyn May 02 '22 at 07:42