着色 CSS 半圆答案

【问题标题】：Coloring CSS half-circle着色 CSS 半圆
【发布时间】：2017-01-29 23:18:05
【问题描述】：

我做了一个半圆，我想根据我需要的百分比给它上色。文本的位置现在无关紧要。我想要的是让 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>

【问题讨论】：

我不确定是否要使用 css 进行此操作，其他人可能会提供帮助。但是您是否考虑过只使用图像/精灵？有时最简单的解决方案是最好的！
@BenLonsdale 我需要圈子来响应，所以我不能使用图片
如果您使用的是引导程序，您可以使用 img-responsive 类，或者只执行宽度 100% 高度自动...。那么您就有了响应式图像
@BenLonsdale 我很清楚这一点，但我正在用原始 html 和 css 做这个项目
别担心，这只是一个建议......

标签： html css colors css-shapes border-color

【解决方案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个渐变
另一个半彩色（类似于伪）也绘制在边框区域下。
每 10% 的梯度可以每 18 度旋转一次。

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

【讨论】：

目前为止是一个非常好的解决方案，但是我想看看是否可以不使用动画。如果没有人比这更好，我会做这个最佳答案，因为它解决了我的四分之一圆问题
没有动画！您只需在 /*demo*/ 之后删除并使用 transform: rotate(-70deg);
@siberianl_wolk 也许您没有收到有关 Baara Al-Tabaa 评论的通知，该评论回答了您的 _ 没有动画！您只需在 /*demo*/ 之后删除并使用transform: rotate(-70deg); _ 我还更新了 sn-p（css 注释中解释如何计算 deg/%）并添加了第二个带有渐变的 sn-p（i保留边界，请参阅背景剪辑以与其他答案进行比较）

【解决方案2】：

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

如果您想要更独特的颜色（不混合），我相信您可以使用渐变和浏览器特定的 CSS 来实现它，see here。但是如果你只是想要它径向：outline 属性可以实现这种外观，如果你只是改变border 和outline 之间的愿望比率。

如果您想获得有关 css 的更好答案，图片会很棒。

【讨论】：

谢谢。可以给我一个给定代码的例子吗？

【解决方案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/

【讨论】：

我需要 2 种纯色，而不是它们之间的渐变：/ 不过没关系，我找到了另一种解决方案

【解决方案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>

【讨论】：