你可以使用一个伪函数并旋转它，通过类或js设置旋转以保持写入的值。
下面的演示使用动画来显示效果

.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个渐变
• 另一个用半彩色（像伪）也画在边框区域下。
• 梯度可以每10%旋转18度。

一个二个一个一个

你可能正在寻找CSS3 gradients。这将有两种颜色之间的渐变（例如灰色和红色之间）。它可以径向或线性完成。
如果你想要更鲜明的颜色（没有混合），我相信你 * 可以 * 用渐变和浏览器特定的CSS，see here来实现。outline属性可以实现这种外观，只要您更改border和outline之间的wishes比率即可。
如果你想要更好的关于css的答案，图片会很棒。

这个怎么样？，如果你不介意改一些代码的话.

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

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

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