CSS旋转会在div周围创建不必要的边框

Question

我试图基于三个div制作饼图。但是，div周围总是有一些不需要的边框。此外，它们会在放大和缩小时扩大或缩小。

尝试其他方式解决其他类似问题。仍然无法正常工作。

codepen链接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

只需在*：

处使用

  

边界：无：

    * {
        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>