html - 着色 CSS 半圆

Question

我做了一个半圆，我想按照我需要的百分比给它上色。文本的位置暂时无关紧要。我想要的是将 50% 的边框着色。稍后我将需要 70% 和 80%。我该怎么做？

.info__radius__outline {
  width: 20%;
  height: 6em;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid gray;
  border-bottom: 0;
  display: inline-block;
}

<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div>

Answer 1

您可以使用伪造并旋转它，通过类或 js 设置旋转以坚持写入的值。

下面的Demo是用动画来展示效果

.info__radius__outline {overflow:hidden;}
.info__radius,
.info__radius:before {
  position: relative;
  width: 20%;
  height: 10vw;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid rgba(0,0,0,0); 
  border-bottom: 0;
  display: inline-block;
  text-align:center;
}

.info__radius:before {
  content: '';
  position: absolute;
  bottom: 0px;
  width:auto;
  left:-10px;
  right:-10px;
  transform-origin: bottom center;
  transform: rotate(-180deg);
  border-color: gray;
  /* demo */
  animation: rot 5s infinite linear alternate;
}
@keyframes rot {
  80%, to {
    transform: rotate(0deg);
  }
}
.info__radius.p70:before {
  transform: rotate(-54deg);/* remove 30% : do  (180deg / 10) * 3  .*/
  animation:none;
}

<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div><div class="info__radius__outline">
  <div class="info__radius p70">
    <p class="info__radius__text">70</p>
  </div>
</div>

a few similar examples

---

---

关于渐变的想法，您需要 2 个渐变和 background-clip 将它们绘制在 2 个不同的部分:

• 1 gradient will be drawn on the center away from the transparent borders

• the other with the half colored (alike the pseudo) also drawn under the borders area.

• Gradient can be rotated every 18deg for each 10% .

.info__radius {
  position: relative;
  width: 20%;
  height: 10vw;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid rgba(0,0,0,0); 
  box-sizing:border-box;
  border-bottom: 0;
  display: inline-block;
  text-align:center;
  background:   
    linear-gradient(rgba(209, 109, 91,0.7) ,rgba(0,0,0,0.5)) no-repeat center  ,/* can be (white,white) to hide portion of the next gradient*/
    linear-gradient(-54deg, transparent 50%, turquoise 50%) -10px -10px 
   ;
  color:white;
  background-size: auto auto, calc(100% + 20px) calc(200% + 40px);
  background-clip: content-box,border-box;
   
  /*demo */
  box-shadow:0 0 0 2px gray, inset 0 0  2px 1px black;
}

.info__radius.p25 {
 line-height:8vw;
  background:   
    linear-gradient(rgba(255,255,255,0.7) ,rgba(255,255,255,0.7)) no-repeat center  ,
    linear-gradient(-135deg, transparent 49%,black 50%, turquoise 50%) -10px -10px 
   ;
  color:tomato;
  font-weight:bold;
  background-size: auto auto, calc(100% + 20px) calc(200% + 40px);
  background-clip: content-box,border-box;

}

.info__radius {float:left;margin:1em;}

<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div>

<div class="info__radius__outline">
  <div class="info__radius p25">
    <p class="info__radius__text">25%</p>
  </div>
</div>