How can I paint a sector only with border-radius? - html

Question

As we know, in CSS, we can use:
width : 100px; height : 100px; border-radius : 100% 0 0 0;
To paint a sector with 90deg; and I want to use this way to paint a sector with any deg. But the front sector doesn't cover perfectly. It leaks a slice of red sector and I don't know how to handle it.
body {
background-color: #fbb;
}
.box {
width: 200px;
height: 200px;
position: relative;
background-color: #f00;
border-radius: 100% 0 0;
}
.box::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fbb;
border-radius: 100% 0 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="box"></div>

Answer 1

You can cheat a bit and shift the whole overlay with an additional transform.
body {
background-color: #fbb;
}
.box {
width: 200px;
height: 200px;
position: relative;
background-color: #f00;
border-radius: 100% 0 0;
}
.box::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fbb;
border-radius: 100% 0 0;
transform-origin: 100% 100%;
transform: rotate(45deg) translate(-1px, 0px); /* <---- here */
}
<div class="box"></div>
It also seems to work by shifting the transform origin slightly.
body {
background-color: #fbb;
}
.box {
width: 200px;
height: 200px;
position: relative;
background-color: #f00;
border-radius: 100% 0 0;
}
.box::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fbb;
border-radius: 100% 0 0;
transform-origin: 101% 100%; /* <---- here */
transform: rotate(45deg);
}
<div class="box"></div>
You could also use a sharp box shadow.
body {
background-color: #fbb;
}
.box {
width: 200px;
height: 200px;
position: relative;
background-color: #f00;
border-radius: 100% 0 0;
}
.box::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fbb;
border-radius: 100% 0 0;
transform-origin: 100% 100%;
transform: rotate(45deg);
box-shadow: 0 0 0 .5px #fbb; /* <---- here */
}
<div class="box"></div>
None of these are mathematically perfect, but they may suit your practical needs.