Shadow insert that does not fit the curve

Question

FIDDLE NUMBER 1

This is the script 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>

Run codeHide result

In this particular example, I used the 100% upper left border radius, and all other border radii are 0%, and the height is equal to the width, creating a quadrant.

Now I have added 3 box-shadows inserts to the main element with x, y offsets. I expect the shadow boxes to follow the curve and be parallel to each other, for example:

This is the result:

---

FIDDLE NUMBER 2

This is another example of a shadow shadow that does not correspond to a curve. This one without x 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>

Run codeHide result

In this case, the pink area should be a quadrant, but it looks like a triangle.

- ? ? , , .

Answer 1

, box-shadow. 200 (100% ), , , , . , , , 200px. , 2- ​​, , . , , 200 .

#wrapper CSS : http://jsfiddle.net/31xLprkv/1/, . SO URL- Fiddle, :

HTML

<div id="wrapper">
    <div id="one"></div>
</div>

CSS

/*#wrapper {
    height: 200px;
    width: 200px;
    overflow: hidden;
}*/

#one {
    height: 200px;
    width: 200px;
    margin: 120px;
    border-radius: 200px 0 0 0;
    background-color: plum;
    box-shadow: -40px -40px red, -80px -80px blue, -120px -120px green;
    float: left;
}

, , , .