CSS Z-бои на анимированных круговых круговых диаграммах

Question

Итак, я нашел этот пример кода анимированной круговой диаграммы полукруга, выполненной на чистом CSS.Я пытаюсь использовать его для «политического распределения мест».Как вы можете видеть по краям диаграммы на изображении ниже, по краям виден цвет нижних кусочков.

Я не уверен, можно ли это исправить, и если да,как.Эффект виден как в Chrome, так и в Firefox, и, похоже, он ухудшается, когда я изменяю высоту и ширину с пиксельных значений на vw-единицы.

Я также включил скомпилированную CSS-версию исходного фрагмента с несколькимиПример дуги ниже.

Суть CSS, которая приводит к возникновению дуг, здесь:

РЕДАКТИРОВАТЬ: я изменил его натакже используйте VW.Вы можете увидеть проблему с краем на конце средней (желтой) дуги, она показывает основную зеленую дугу.

.container {
  display: inline-block;
  margin: 30px 20px;
}
.container .label-text {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.pie-wrapper {
  position: relative;
  width: 80vw;
  height: 40vw;
  overflow: hidden;
}
.pie-wrapper .arc, .pie-wrapper:before {
  content: '';
  width: 80vw;
  height: 40vw;
  position: absolute;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  left: 0;
  box-sizing: border-box;
}
.pie-wrapper:before {
  border: 20vw solid #E8E8E8;
  border-bottom: none;
  top: 0;
  z-index: 1;
  border-radius: 40vw 40vw 0 0;
}
.pie-wrapper .arc {
  border: 20vw solid #47CF73;
  border-top: none;
  border-radius: 0 0 40vw 40vw;
  top: 100%;
  z-index: 2;
}
.pie-wrapper .score {
  color: #394955;
  font-size: 28px;
  display: block;
  width: 200px;
  text-align: center;
  margin-top: 70px;
}

.arc[data-value="24"] {
  -moz-animation: fill 2s;
  -webkit-animation: fill 2s;
  animation: fill 2s;
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -webkit-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
  transition: All 5s ease;
  border-color: #47CF73;
}
.arc[data-value="24"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.arc[data-value="24"]::before {
  background-color: #47CF73;
}

.arc[data-value="65"] {
  -moz-animation: fill 2s;
  -webkit-animation: fill 2s;
  animation: fill 2s;
  -moz-transform: rotate(117deg);
  -ms-transform: rotate(117deg);
  -webkit-transform: rotate(117deg);
  transform: rotate(117deg);
  transition: All 5s ease;
  border-color: #47CF73;
}
.arc[data-value="65"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.arc[data-value="65"]::before {
  background-color: #47CF73;
}

.arc[data-value="100"] {
  -moz-animation: fill 2s;
  -webkit-animation: fill 2s;
  animation: fill 2s;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: All 5s ease;
  border-color: #47CF73;
}
.arc[data-value="100"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.arc[data-value="100"]::before {
  background-color: #47CF73;
}

.arc[data-value="24"] {
  border-color: #FF3C41;
}
.arc[data-value="24"]::before {
  background-color: #FF3C41;
}

.arc[data-value="65"] {
  border-color: #FCD000;
}
.arc[data-value="65"]::before {
  background-color: #FCD000;
}

.arc[data-value="80"] {
  border-color: #FCD000;
}
.arc[data-value="80"]::before {
  background-color: #FCD000;
}

.legend {
  display: inline-block;
  width: 150px;
  vertical-align: text-bottom;
  margin-left: 100px;
  background-color: #f0f0f0;
}
.legend span {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 0 10px 0 20px;
}
.legend span.green {
  background-color: #47CF73;
}
.legend span.orange {
  background-color: #FCD000;
}
.legend span.red {
  background-color: #FF3C41;
}

@-moz-keyframes fill {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #FF3C41;
  }
  50% {
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #47CF73;
  }
}
@-webkit-keyframes fill {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #FF3C41;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #47CF73;
  }
}
@keyframes fill {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #FF3C41;
  }
  50% {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #47CF73;
  }
}

<div class="container">
  <div class="pie-wrapper">
     <div class="arc" data-value="100"></div>
     <div class="arc" data-value="65"></div>
     <div class="arc" data-value="24"></div>
  </div>
</div>

Answer 1

Мне трудно это увидеть, но я думаю, что это может сработать?

.pie-wrapper .arc { background-color: white; }