带有透明形状的css半边框圆 [英] 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 shapes on it.

首先，我需要一个带有半边框的圆，然后在其上再加上一个透明形状的圆

First at all i need a circle with half border, then put another circle on it with transparent shapes

有没有更简单的方法，例如使用画布?

Is there a easier way for example with canvas ?

我需要什么:

    .circle {
      width: 80px;
      height: 80px;
      margin-left: 0;
      border: 1px solid #E0E0E0;
      border-radius: 100%;
      background-color: transparent;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      align-items: center;
    }
    .example {
       background: linear-gradient(transparent 20%, #00EFAF 20%);
    }

 <div class="circle example" data-fill="50">
    </div>

推荐答案

您可以结合使用遮罩和渐变来实现此目的:

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)),#00EFAF 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
}

body {
  background:#f2f2f2;
}

<div class="box" style="--fill:20%"></div>
<div class="box" style="--fill:50%;--b:20px;"></div>
<div class="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)),#00EFAF 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
}

body {
  background:#f2f2f2;
}

<div class="box" style="--fill:20%">20%</div>
<div class="box" style="--fill:50%;--b:20px;">50%</div>
<div class="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)),#fff calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
}

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

body {
  background:#f2f2f2;
}

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

这是使用 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(0   calc(100% - var(--fill)),
           100% calc(100% - var(--fill)),
           100% 100%,
           0    100%);
  transition:0.5s;
}
.box:hover::before {
  clip-path:
    polygon(0   0,
           100% 0,
           100% 100%,
           0    100%);

}
body {
  background:#f2f2f2;
}

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

这篇关于带有透明形状的css半边框圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！