JSFiddle - React, Tailwind, and code Playground

by elias94xx

HTML

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

CSS

.chart {
  position: absolute;
  width:0;
  height:0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right:60px solid red;
  border-top:60px solid transparent;
  border-left:60px solid transparent;
  border-bottom:60px solid transparent;
}

#chart2 {
  border-right:60px solid transparent;
  border-top:60px solid green;
  border-left:60px solid transparent;
  border-bottom:60px solid transparent;
}

#chart3 {
  border-right:60px solid transparent;
  border-top:60px solid transparent;
  border-left:60px solid blue;
  border-bottom:60px solid transparent;
}

#chart4 {
  border-right:60px solid transparent;
  border-top:60px solid transparent;
  border-left:60px solid transparent;
  border-bottom:60px solid yellow;
}