CSS-Only Pie Charts

Example for CSS-Only Pie Charts

HTML

<pie>
    <slice></slice>
    <slice></slice>
    <slice></slice>
    <div class="center-circle"></div>
    <div class="a-left"
    ></div>
    <div class="a-right"></div>
    <div class="a-middle"
    ></div>
    <div class="ring"></div>
</pie>

CSS

pie, slice, slice:before {
    display: inline-block;
    border-radius: 100px;
    height: 200px; width: 200px;
}

pie {
    position: relative;
}

slice, slice:before {
    clip: rect(0px,100px,200px,0px);
    position: absolute;
}
slice:before {
    content: '';
}

.center-circle {
  position: absolute;
  clip-path: circle(40px at center);
  background-color: #d64405;
  z-index: 1;
  width: 200px;
  height: 200px;
}

.a-left {
  position: absolute;
  top: 62px;
  left: -34px;
  transform: rotate(-67deg);
  background-color: #000;
  width: 200px;
  height: 50px;
  z-index: 2;
  border-top-right-radius: 50px;
}

.a-right {
  position: absolute;
  top: 72px;
  right: -30px;
  transform: rotate(67deg);
  background-color: #000;
  width: 180px;
  height: 50px;
  z-index: 2;
}

.a-middle {
  position: absolute;
  top: 110px;
  left: 40px;
  background-color: #000;
  width: 100px;
  height: 45px;
  z-index: 2;
}

.ring {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 3;
  border: 20px solid #000;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  transform-origin: top left;
}

slice:nth-child(1):before {  background: #53a00a; -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }

slice:nth-child(2) { -moz-transform: rotate(-120deg); -webkit-transform: rotate(-120deg); transform: rotate(-120deg); }
slice:nth-child(2):before { background: #0e415a; -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }

slice:nth-child(3) { -moz-transform: rotate(-240deg); -webkit-transform: rotate(-240deg); transform: rotate(-240deg); }
slice:nth-child(3):before { background: #0b7384; -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }