JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
for each piece of the pie chart create one div and give it
a data-value attribute that represents the amount (in degrees) that
represents its total visible portion, and a data-start attribute
that matches the amount rotation for the starting  (the cumulative value amount of all the previous pieces).
-->
<div class="pie" data-start="0" data-value="140"></div>
<div class="pie" data-start="140" data-value="60"></div>
<div class="pie big" data-start="200" data-value="160"></div>

CSS

/* 
  make each pie piece a rectangle twice as high as it is wide.
  move the transform origin to the middle of the left side.
  Also ensure that overflow is set to hidden.
*/
  .pie {
        position:absolute;
        width:100px;
        height:200px;
        overflow:hidden;
        left:110px;
        -moz-transform-origin:left center;
        -ms-transform-origin:left center;
        -o-transform-origin:left center;
        -webkit-transform-origin:left center;
        transform-origin:left center;
    }
/*
  unless the piece represents more than 50% of the whole chart.
  then make it a square, and ensure the transform origin is
  back in the center.

  NOTE: since this is only ever a single piece, you could
  move this to a piece specific rule and remove the extra class
*/
    .pie.big {
        width:200px;
        height:200px;
        left:10px;
        -moz-transform-origin:center center;
        -ms-transform-origin:center center;
        -o-transform-origin:center center;
        -webkit-transform-origin:center center;
        transform-origin:center center;
    }
/*
  this is the actual visible part of the pie. 
  Give it the same dimensions as the regular piece.
  Use border radius make it a half circle.
  move transform origin to the middle of the right side.
  Push it out to the left of the containing box.
*/
    .pie:BEFORE {
        content:"";
        position:absolute;
        width:100px;
        height:200px;
        left:-100px;
        border-radius:100px 0 0 100px;
        -moz-transform-origin:right center;
        -ms-transform-origin:right center;
        -o-transform-origin:right center;
        -webkit-transform-origin:right center;
        transform-origin:right center;

    }
 /* if it's part of a big piece, bring it back into the square */
    .pie.big:BEFORE {
        left:0px;
    }
/* 
  big pieces will also need a second semicircle, pointed in the
  opposite direction to hide the first part behind.
*/
    .pie.big:AFTER {
   ...