着色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

您可以使用伪造并旋转它，通过 class 或 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>

Answer 2

您可能正在寻找 CSS3 gradients。这将在两种颜色之间逐渐变化（例如灰色和红色之间）。它可以径向或线性地完成。

如果您想要更鲜明的颜色（不混合），我相信您可以通过渐变和浏览器特定的方式实现它CSS，see here. But if you just want it radially: the outline 属性可以实现这种效果，只要改变border和outline之间的比例即可。

如果您想要关于 css 的更好答案，图片会很棒。

Answer 3

这个怎么样？如果您不介意更改一些代码。

[HTML]

<div class="info_radius">70</div>

[CSS]

.info_radius {
    width: 20%;
    height: 6em;
    padding: 2%;
    color: #000;
    border: 10px solid transparent;
    text-align: center;
    box-sizing: border-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%), linear-gradient(90deg,rgba(30,87,153,1) 0%,rgba(43,226,147,1) 18%,rgba(226,207,36,1) 35%,rgba(224,83,35,1) 66%,rgba(218,35,224,1) 81%,rgba(125,185,232,1) 100%);
    border-radius: 110px 110px 0 0;
    border-bottom: 0;
}

https://jsfiddle.net/978zLw2q/

Answer 4

这只是另一种解决方案，类似于@GCyrillus 的第一个解决方案，但采用不同的方法，使用伪元素和 overflow hidden 容器。对于动画，使用了 keyframe 动画：

#radius {
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 200px;
}

.radius-outline {
    -moz-animation: anim 3s infinite linear alternate;
    -webkit-animation: anim 3s infinite linear alternate;
    animation: anim 3s infinite linear alternate;
    border-bottom-left-radius: 100%;
    border-left: 10px solid gray;
    border-right: 10px solid transparent;
    position: relative;
    top: 100px;
    -moz-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top;
}

.radius-outline,
.radius-outline::after {
    border-bottom: 10px solid gray;
    border-top: 10px solid transparent;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

.radius-outline::after {
    border-right: 10px solid gray;
    border-left: 10px solid transparent;
    border-bottom-right-radius: 100%;
    content: "";
    display: block;
    position: absolute;
    right: -110px;
    top: -10px;
}

.radius-info {
    color: gray;
    font-family: Arial;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 70%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@-moz-keyframes anim {
    to { transform: rotate(180deg); }
}

@-webkit-keyframes anim {
    to { transform: rotate(180deg); }
}

@keyframes anim {
    to { transform: rotate(180deg); }
}

<div id="radius">
  <div class="radius-outline"></div>
  <div class="radius-info">70%</div>
</div>

着色CSS个半圆

Coloring CSS half-circle

html

css

colors

css-shapes

border-color