2

You can see the faint red line in this picture

the above faint red line is the result of a simple 2 absolute positioned circle divs stacked on top of each other

here's the code

div {
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
}
.front {
    background-color:white;
    z-index:5;
}
.back {
    background-color:red;
    z-index:4;
}
<div class="back"></div>
<div class="front"></div>

I tried putting exact border-radius instead of 50%, same issue, I feel that it's due to how fractions are not accurately represented in binary, but aside from knowing the reason for this, is there a solution?

the use case for overlapping circles is to create pie charts without canvas.

wlh
  • 3,426
  • 1
  • 16
  • 32
Kareem Kamal
  • 1,028
  • 1
  • 8
  • 21
  • I would honestly use something like SVG or canvas if you're going to be creating stuff like charts. pure HTML and CSS will have its limitations – zgood Aug 02 '18 at 18:28

0 Answers0