CODEWITHSUNDEEP
htmlcss
v1n1
v1n1

Reputation: 13

Rounded Semicircle with CSS

enter image description here

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;
}
<div class="circle"></div>

Upvotes: 1

Views: 128

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

Another possibility with css

I have used ::before and ::after pseudo elements for the rounded corner for the semi circle.

.parentcircle {
  position: absolute;
  background: #824b20;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  padding: 30px;
}

.outercircle {
  position: relative;
  width: 100%;
  height: 100%;
  background: #e08027;
  border-radius: 50%;
}

.circle {
  position: relative;
  width: calc(100% - 20px);
  height: calc(50% - 10px);
  background-color: transparent;
  top: 50%;
  left: -10px;
  border-bottom-right-radius: 50% 100%;
  border-bottom-left-radius: 50% 100%;
  border: 20px solid #FFF58F;
  border-top: 0
}

.circle::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: #FFF58F;
  top: -10px;
  left: -20px;
}

.circle::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: #FFF58F;
  top: -10px;
  left: 100%;
}
<div class="parentcircle">
  <div class="outercircle">
    <div class="circle"></div>
  </div>
</div>

Upvotes: 0

George Chond
George Chond

Reputation: 997

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>

Upvotes: 1

Related Questions