パーセントダイヤル色の重なりの問題

Question

パーセンテージチャート：赤色が緑色に重なる場合

円は、微細であり、その緑色iが背景に赤の小さなビットを参照赤色乗り越えるとき。私は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は確かに動作します。