How can i make this semicircle round
I’m struggling to make the semicircle edges round, where can i fix my code?
.circle {
position: absolute;
width: 80px;
height: 50px;
background-color: transparent;
top: 70;
left: 20;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #FFF58F;
border-top: 0 }
>Solution :
Only possible way to do this in pure CSS is by faking it with pseudo-elements:
.wrapper {
background: darkorange;
border-radius: 50%;
width: 200px;
height: 200px;
display: grid;
justify-content: center;
align-content: center;
}
.box {
background: orange;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
}
.circle {
position: absolute;
width: 100px;
height: 50px;
background-color: transparent;
bottom: 0;
left: -10px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before, .circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
}
.circle::before {
left: -20px;
top: -8px;
}
.circle::after {
right: -20px;
top: -8px;
}<div class="wrapper">
<div class="box">
<div class="circle"></div>
</div>
</div>