お互いの上に2つのボーダーが並んでいません

Question

ここではCSSで本当にイライラする時間がありますが、基本的にはZ-インデックスのボーダーを重ねて1/5のボーダー2 /第5境界3/5th境界線と円の4/5th境界

しかし、そうすることで、絶対配置された境界線が正確に並んでいないので、その背後の色の出血を見ることができます。それ以外はどうすればいいのですか？ここには jsFiddleがあり、コードは次のとおりです。

.circle { 
 
    padding: 20px; 
 
    border: 20px solid transparent; 
 
    border-top-color: red; 
 
    position: absolute; 
 
    border-radius: 50px; 
 
    z-index: 0; 
 
} 
 
.two { 
 
    border-top-color: blue; 
 
    z-index: 1; 
 
}

<div class="circle"></div> 
 
<div class="circle two"></div>

Answer 1

あなたの問題は、「ジャギー」を防ぐためにブレンドする色を引き起こし、色が出血しているように見えますアンチエイリアシング、です。しかし、ズームインすると、出血がないことがわかります。それと浮動小数点数は正確には格納されないので、CSSの円の計算はほんのわずかです。

私は、Adobe IllustratorやInkScape、あるいはオンラインのベクターグラフィックスツールを使用して、あなたが望むもののSVGを作成します。

VERDICT： Adob​​e IllustratorやInkScape、オンラインベクターグラフィックツールなどを使用して、必要なものをSVGにします。

Answer 2

これは必要なものですか？

.circle { 
 
    padding: 20px; 
 
    border: 20px solid; 
 
    border-top-color: red; 
 
    position: absolute; 
 
    border-radius: 50px; 
 
    z-index: 0; 
 
} 
 

 
.circletwo { 
 
    border-top-color: blue; 
 
    z-index: 123; 
 
}

<div class="circle"></div> 
 
<div class="circletwo"></div>