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设置旋转以坚持写入的值。

下面的演示使用动画来显示效果

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13; a few similar examples

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

将在远离透明边框的中心绘制1个渐变
另一半的颜色（与伪相似）也在边界区域下绘制。
每10％，梯度可以每18度旋转一次。

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

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

如果你想要更多不同的颜色（没有混合），我相信你可以使用渐变和浏览器特定的CSS see here来实现它。但是，如果您只是径向地想要它：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的第一个解决方案，但采用了不同的方法，使用了伪元素和2容器。对于动画，使用了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); }
}

着色CSS半圆

4 个答案: