Css Half Bordered Circle With Transparent Shapes On It

I need a circle with half border from bottom,I want to fill this circle with color by percentage. I need to put another circle on that but center of other circle has a transparent

Solution 1:

You can use mask combined with gradient to achieve this:

.box {
  --b: 10px; /* 10px of visible border */width:150px;
  height:150px;
  display:inline-block;
  border-radius:50%;
  background:linear-gradient(transparent calc(100% - var(--fill)),#00EFAF0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fffcalc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fffcalc(100% - var(--b)));
}

body {
  background:#f2f2f2;
}

<divclass="box"style="--fill:20%"></div><divclass="box"style="--fill:50%;--b:20px;"></div><divclass="box"style="--fill:80%;--b:5px;"></div>

Use it as pseudo element to easily add content inside:

.box {
  --b: 10px; /* 10px of visible border */width:150px;
  height:150px;
  display:inline-flex;
  justify-content:center;
  align-items: center;
  font-size:30px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  z-index:0;
}

.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(transparent calc(100% - var(--fill)),#00EFAF0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fffcalc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fffcalc(100% - var(--b)));
}

body {
  background:#f2f2f2;
}

<divclass="box"style="--fill:20%">20%</div><divclass="box"style="--fill:50%;--b:20px;">50%</div><divclass="box"style="--fill:80%;--b:5px;">80%</div>

In case you want to perform animation you can adjust the linear-gradient like below

.box {
  --b: 10px; /* 10px of visible border */width:150px;
  height:150px;
  display:inline-flex;
  justify-content:center;
  align-items: center;
  font-size:30px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  z-index:0;
}

.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(#00EFAF,#00EFAF) content-box;
  padding-top:calc(100% - var(--fill));
  transition:0.5s;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fffcalc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fffcalc(100% - var(--b)));
}

.box:hover::before {
  padding-top:0%;
}

body {
  background:#f2f2f2;
}

<divclass="box"style="--fill:20%">20%</div><divclass="box"style="--fill:50%;--b:20px;">50%</div><divclass="box"style="--fill:80%;--b:5px;">80%</div>

---

Here is another idea using clip-path

.box {
  width:150px;
  height:150px;
  display:inline-flex;
  justify-content:center;
  align-items: center;
  font-size:30px;
  overflow:hidden;
  position:relative;
  z-index:0;
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:var(--b,10px) solid #00EFAF;
  border-radius:50%;
  clip-path:
    polygon(0calc(100% - var(--fill)),
           100%calc(100% - var(--fill)),
           100%100%,
           0100%);
  transition:0.5s;
}
.box:hover::before {
  clip-path:
    polygon(00,
           100%0,
           100%100%,
           0100%);

}
body {
  background:#f2f2f2;
}

<divclass="box"style="--fill:20%">20%</div><divclass="box"style="--fill:50%;--b:20px;">50%</div><divclass="box"style="--fill:80%;--b:5px;">80%</div>