Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="chart under-half"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@mixin simple-pie-chart($size, $current-value, $total-value, $chart-color: grey, $background-color: white) {
  // Variables
  $percentage: $current-value/$total-value;
  
  position: relative;
  width: $size;
  height: $size;

  &.under-half {
    left: $size/2; 
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center; 
  } &.over-half {
    left: 0;    
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center; 
  }
  
  &:before {
    content: '';
    position: absolute;
    width: $size/2;
    height: $size;
    border-radius: $size/2 0 0 $size/2;
    background: $chart-color;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -moz-transform: rotate(#{$percentage * 360}deg);
    -ms-transform: rotate(#{$percentage * 360}deg);
    -webkit-transform: rotate(#{$percentage * 360}deg);
    -o-transform: rotate(#{$percentage * 360}deg);
    transform: rotate(#{$percentage * 360}deg);   
  }
  
    &.over-half:before {
      left: 0;
    } 
    &.under-half:before {
      left: -$size/2;      
    }

  &:after {
    content: '';
    position: absolute;
    width: $size/2;
    height: $size;
    text-align: center;
    line-height: $size;
  }

    &.under-half:after {
      left: -$size/2;
      background: $background-color;
      outline: 1px solid $background-color;
      box-shadow: none;
    }
    &.over-half:after {
      left: $size/2;
      text-indent: -$size/2;
      background: $chart-color;
      border-radius: 0 $size/2 $size/2 0;    
    }
  
}

// Chart
// 40/100 or 40%
.chart {
  @include simple-pie-chart(8em, 33, 100, #ccc, #f2ecdb);
}



body {
  background: #f2ecdb;
}

SassMeister-output.css

.chart {
  position: relative;
  width: 8em;
  height: 8em;
}
.chart.under-half {
  left: 4em;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.chart.over-half {
  left: 0;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.chart:before {
  content: '';
  position: absolute;
  width: 4em;
  height: 8em;
  border-radius: 4em 0 0 4em;
  background: #cccccc;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -webkit-transform: rotate(118.8deg);
  -o-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.chart.over-half:before {
  left: 0;
}
.chart.under-half:before {
  left: -4em;
}
.chart:after {
  content: '';
  position: absolute;
  width: 4em;
  height: 8em;
  text-align: center;
  line-height: 8em;
}
.chart.under-half:after {
  left: -4em;
  background: #f2ecdb;
  outline: 1px solid #f2ecdb;
  box-shadow: none;
}
.chart.over-half:after {
  left: 4em;
  text-indent: -4em;
  background: #cccccc;
  border-radius: 0 4em 4em 0;
}

body {
  background: #f2ecdb;
}

SassMeister-rendered.html

<div class="chart under-half"></div>