<div class="chart">

  83
  
  <span></span>
  
  <div class="bar bar-1"></div>
	<div class="bar bar-2"></div>
	<div class="bar bar-3"></div>

</div>

@import "compass/css3";

$mainColor: #54a2dd;
$size: 100px;

.chart {
  margin: $size auto;
  position: relative;
  width: $size;
  height: $size;
  border-radius: 50px;
  background: white;
  font: bold 50px/100px Sans-Serif;
  text-align: center;
  line-height: 100px;
  color: $mainColor;
  &:before {
    content: "";
    position: absolute;
      left: -20px;
       top: -20px;
    bottom: -20px;
     right: -20px;
    border-radius: 50%;
    background: $mainColor;
    z-index: -2;
  }
  span {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid white;
    z-index: -1;
    top: -28px;
    left: 0px;
    transform-origin: 50px 80px;
    transform: rotate(285deg);
  }
  .bar {
  	background: $mainColor;
    height: 25px;
    width: 150px;
    position: absolute;
    top: 20px;
    left: 100%;
  }
  .bar-2 {
  	 top: 45px;
     width: 100px;
  }
  .bar-3 {
  	 top: 69px; /* weird */
     width: 200px;
  }
}