CSS rotation create unwanted border around divs - css

Question

I was trying to do the pie chart based on three divs. However, there's always some unwanted border around the divs. Also, they'll expand or shrink while zooming in and out.
Try many ways on other similar questions' solutions. Still can't work.
codepen link https://codepen.io/DavidLee0314/pen/PXWzYJ?editors=1100
* {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
}
.pie {
left: 40%;
top: 30%;
width: 174px;
height: 174px;
border-radius: 100%;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 0px;
white-space: nowrap;
}
.pie .small-box {
width: 100%;
height: 100%;
}
.pie .grey {
transform: translateX(-50%);
background-color: #f3f5f2;
}
.pie .green {
transform: translateX(25%);
background-color: #222;
}
.pie .change {
transform-origin: left center 0;
transform: translateZ(0) scale(1, 1) translateX(50%) rotate(0deg);
background-color: #f3f5f2;
}
<div class="pie">
<div class="small-box green"></div>
<div class="small-box grey"></div>
<div class="small-box change"></div>
</div>

Answer 1

just use this at *:
Border: none:
* {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
padding: 0;
border: none;
}
.pie{
left: 40%;
top: 30%;
width: 174px;
height: 174px;
border-radius: 100%;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 0;
white-space: nowrap;
}
.small-box {
width: 100%;
height: 100%;
}
.grey {
transform: translateX(-50%);
background-color: #f3f5f2;
}
.green {
transform: translateX(25%);
}
.change {
transform-origin: left center 0;
transform: translateZ(0) scale(1.0, 1.0) translateX(50%) rotate(0deg);
background-color: #f3f5f2;
}
<div class="pie">
<div class="small-box green"></div>
<div class="small-box grey"></div>
<div class="small-box change"></div>
</div>