JSFiddle - React, Tailwind, and code Playground

HTML

<div id="piechart">
  <div id="piece1" class="piece">
      <div class="piece-inner"></div>      
  </div>
  <div id="piece2" class="piece">
      <div class="piece-inner"></div>
  </div>
  <div id="piece3" class="piece">
      <div class="piece-inner"></div>
  </div>
</div>

CSS

#piechart {
  position: relative;
  width: 250px;
  height: 250px;
  margin-left: 100px;
  margin-top: 100px;
}
 
.piece {
  position: absolute;
  width: 250px;
  height: 250px;
  clip: rect(0px, 250px, 250px, 125px);
  border-radius: 125px;
  transition: all 0.8s ease-out;
}

.piece-inner {
    position: absolute;
	width: 250px;
	height: 250px;
	clip: rect(0px, 125px, 250px, 0px);
	border-radius: 125px;
	-webkit-backface-visibility: hidden;
    transition: all 0.8s ease-out;
}
/* Spezifische Einstellungen */
#piece1 > .piece-inner {
    background: red; 
}
#piece2 > .piece-inner {
    background: blue; 
}
#piece3 > .piece-inner {
    background: green;
}

JavaScript

var wert1 = 72;
var wert2 = 126;
var wert3 = 162;

document.querySelector("#piece1").style.webkitTransform = "rotate(0deg)";
document.querySelector("#piece1").style.transform = "rotate(0deg)";
document.querySelector("#piece1 > .piece-inner").style.webkitTransform =
    "rotate(" + wert1 + "deg)";
document.querySelector("#piece1 > .piece-inner").style.transform = "rotate(" + wert1 + "deg)";

document.querySelector("#piece2").style.webkitTransform = "rotate(" + wert1 + "deg)";
document.querySelector("#piece2").style.transform = "rotate(" + wert1 + "deg)";
document.querySelector("#piece2 > .piece-inner").style.webkitTransform = "rotate(" + wert2 + "deg)";
document.querySelector("#piece2 > .piece-inner").style.transform = "rotate(" + wert2 + "deg)";

document.querySelector("#piece3").style.webkitTransform = "rotate(" + (wert1 + wert2) + "deg)";
document.querySelector("#piece3").style.transform = "rotate(" + (wert1 + wert2) + "deg)";
document.querySelector("#piece3 > .piece-inner").style.webkitTransform = "rotate(" + wert3 + "deg)";
document.querySelector("#piece3 > .piece-inner").style.transform = "rotate(" + wert3 + "deg)";