Две границы друг на друга, не выстроены в линию

Question

Эй, ребята, у меня очень расстраивающее время здесь с CSS, в основном я пытаюсь пересечь границы с помощью z-index, чтобы получить визуальное изображение границы 1/5 2/5-я граница 3/5-я граница и 4/5-ая граница круга

Но при этом абсолютные расположенные границы не выровняются точно, вы можете увидеть цветное кровотечение позади него, почему это? Как еще я должен это делать? Вот 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: Используйте что-то вроде Adobe 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>