百分比拨号颜色重叠问题

Question

百分比图表：

当红色与绿色重叠时，圆圈很好，当绿色越过红色时，我看到背景中有一点点红色。我只想用css做这件事，没别的。

我可以在中间设置一个边框半径为80％的饼图，以达到同样的效果。

以下是链接：https://codepen.io/anon/pen/GvyabJ

**html:**
`<div style="animation-delay: -101s"></div>
<!-- -35s == 35% -->

`

**css:**
@bg: #FFFFFF; // background
@c1: #7cfc00; // chart color
@c2: #dc143c; // active color

body {
  background: @bg;
}

div {
  width: 80px;
  height: 80px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  background: @c1 linear-gradient(to right, @c1 50%, @c2 50%);
  color: @c2;
  border-radius: 50%;


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

  @keyframes background {
    50% {
      background-color: currentColor;
    }
  }

  &::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: @bg;
    border-radius: 50%;
  }
  &::before {
    content: '';
    position: absolute;
    display: block;
    background-color: inherit;
    height: 100%;
    width: 50%;
    bottom: 0;
    right: 0;
    border-radius: ~"0 100% 100% 0 / 50%";
    transform: rotate(0);
    transform-origin: 0 50%;
    animation: 50s spin infinite linear,
               100s background infinite step-end;
    animation-play-state: paused;
    animation-delay: inherit;
  }
}

Answer 1

试试这个..

transform-origin: 0 70%;

.it肯定会有用。