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>