Zwei Grenzen übereinander, sind nicht aufgereiht

Question

Hey Leute haben eine wirklich frustrierende Zeit hier mit CSS, im Grunde versuche ich Grenzen mit dem Z-Index zu überlappen, um ein 1/5 Grenze zu sehen 2/5. Grenze 3./5. Grenze und 4./5. Grenze eines Kreises

Aber dabei sind die absolut positionierten Grenzen nicht genau ausgerichtet, man sieht die Farbe dahinter, warum ist das? Wie sollte ich das sonst tun? Hier ist die jsFiddle und der Code ist unten.

.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

Ihr Problem ist, Anti-Aliasing, welches die Farben führt zu mischen "jaggies" zu verhindern und macht es den Anschein, dass die Farben bluten. Wenn Sie jedoch heranzoomen, können Sie sehen, dass keine Blutung auftritt. Das und Fließkommazahlen werden nicht genau gespeichert, so dass die Berechnung der Kreise in CSS sehr geringfügig ist.

Ich würde etwas wie Adobe Illustrator oder InkScape oder sogar ein Online-Vektor-Grafik-Tool verwenden und ein SVG machen, was Sie wollen.

VERGESSEN: Verwenden Sie etwas wie Adobe Illustrator oder InkScape oder sogar ein Online-Vektor-Grafik-Tool und machen Sie eine SVG von was Sie wollen.

Answer 2

Wollen Sie das?

.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>