ISSUE FIDDLE 1
This is the fiddle in question : Fiddle 1
#one {
height: 200px;
width: 200px;
border-radius: 100% 0 0 0;
background-color: plum;
box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px 120px 0 0 green;
}
<div id="one"></div>
In this particular example, I have used 100% top-left border radius, and all other border radii are 0%, and height is equal width, producing a quadrant.
Now I added 3 inset box-shadows to the main element with x,y offsets. I expect the box-shadows to follow the curve, and be parallel to each other, like this :
This is the output instead :
ISSUE FIDDLE 2
This is another example of box-shadow not following the curve. This one's without x-y offsets. Fiddle 2
div {
height: 200px;
width: 200px;
border-radius: 100% 0 0 0;
background-color: plum;
box-shadow: inset 0px 0px 0 70px green;
}
<div></div>
In this case, pink area should be a quadrant, but looks like a triangle.
Why is inset box-shadow losing the curve as the spread radius increases? is it a bug? It seems not to be one as all major browsers give the same output.