用背景颜色填充圈子的一部分

Question

这是JS fiddle

HTML：

<div class="for">
    <span class="no">67%</span>
    <span class="fill" style="height: 67%" />
</div>

CSS：

div {
  width: 100px;
  height: 100px;
  line-height: 100px;
  float: left;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 100%;
  position: relative;
}

.for {
  border-color: green;
  color: green;
  margin-right: 6px;
}
.against {
  border-color: red;
  color: red;
   border-radius: 100%;
}

/* For first circle*/
.fill {
  background: greenyellow;
  display: block;
  width: 100px;
  height: 100px;
  z-index: -1;
  position: absolute;
  left: 0;
  bottom: 0;
}
.against {
    border-radius: 0;
}

我想用高度为百分比的元素的背景颜色填充圆圈的背景。

我设法用方形元素做到了。

由于

Answer 1

您的圈子已经填满。 将overflow: hidden;提交给.for

.for {
    border-color: green;
    color: green;
    margin-right: 6px;
    overflow: hidden;
}

<强> Working Fiddle

Answer 2

或者您可以添加：

.for{    background: linear-gradient(transparent 33%, greenyellow 1%);}