<div class="box">
  <h3> Pie Chart using Clip-Path and Transform </h3>
  <div class="pie">
    <ul class="legend">
      <li>Option 1 - 20%</li>
      <li>Option 2 - 60%</li>
      <li>Option 3 - 10%</li>
      <li>Option 4 - 5%</li>
      <li>Option 5 - 5%</li>
    </ul>
    <!-- data-start will have the value of starting percentage of the slice and data-value is the actual % of the slice. data-start will have the value 0 (for the first slice) and value of the slice of previous slice (for others)-->
    <div class="slice" data-start="0" data-value="20">
      <div class="slice-fill"></div>
      <div class="bg-fill"></div>
    </div>
    <div class="slice" data-start="20" data-value="60">
      <div class="slice-fill"></div>
      <div class="bg-fill"></div>
    </div>
    <div class="slice" data-start="80" data-value="10">
      <div class="slice-fill"></div>
      <div class="bg-fill"></div>
    </div>
    <div class="slice" data-start="90" data-value="5">
      <div class="slice-fill"></div>
      <div class="bg-fill"></div>
    </div>
    <div class="slice" data-start="95" data-value="5">
      <div class="slice-fill"></div>
      <div class="bg-fill"></div>
    </div>
  </div>
</div>