css3 pie chart / css3 круговая диаграмма

README.md

css3 pie chart / css3 круговая диаграмма

See live in https://jsfiddle.net/Helldar/z0o9uesv/126/

app.js

let circle = $('.circle');
let count = 16;
let _rotateStart = 360 / count;
let _rotateLabel = _rotateStart / 2;

for (i = 0; i < count; i++) {
  let _value = 100 / count;
  let _offset = _value * i + _rotateStart;
  
  let _label = $('<label/>')
    .text('foo bar');

  let _item = $('<div/>')
    .addClass('circle_item')
    .css('--offset', `${_offset}`)
    .css('--value', `${_value}`)
    .css('--rotate-label', `${_rotateLabel}`)
    .append(_label)
  ;
  
  circle.append(_item);
}

index.html

<div class="circle">
  <div class="pin"></div>
</div>

styles.scss

$first-color: grey;
$second-color: darkgrey;
$circle-color: #2e2e2e;
$pin-color: #2e2e2e;

$pin-size: 50px;

.circle {
  background-color: $first-color;
  height: 350px;
  width: 350px;
  border: 5px solid $circle-color;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  
  .pin {
    width: $pin-size;
    height: $pin-size;
    position: absolute;
    left: calc(50% - (#{$pin-size} / 2));
    top: calc(50% - (#{$pin-size} / 2));
    background: $pin-color;
    z-index: 3;
    border-radius: 100%;
    box-shadow: 0 0 ($pin-size / 2) 0 rgba(0, 0, 0, 0.75);
    
    &:before {
      $left: $pin-size / 2;
      $right: $pin-size / 2;
     
      content: '';
      position: absolute;
      bottom: $pin-size * 0.6;
      left: 0;
      width: 0;
      height: 0;
      border-left: $left solid transparent;
      border-right: $right solid transparent;
      border-bottom: $pin-size solid $pin-color;
      border-radius: 50%;
      z-index: +1;
    }
    
    &:after {
      $size: $pin-size * 0.8;
      $position: ($pin-size / 2) - ($size / 2);
           
      content: '';
      position: absolute;
      left: $position;
      top: $position;
      width: $size;
      height: $size;
      border-radius: 100%;
      box-shadow: inset 0 0 ($position * 2) 0 rgba(0, 0, 0, 0.8);
      z-index: +2;
    }
  }
}

.circle_item {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  
  height: 100%;
  width: 100%;
  position: absolute;
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 100%;
  clip-path: polygon(
    var(--a) var(--a),
    var(--b) var(--a),
    var(--b) var(--b),
    var(--a) var(--b)
  );
  
  &:first-child { --over50: 1; }
  
  &:before,
  &:after {
    background: $first-color;
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.35);
  }
  
  &:before {
    --degrees: calc((var(--value, 45) / 100) * 360);

    transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
    transform-origin: 50% 0;
  }
  
  &:after { opacity: var(--over50, 0); }
  
  &:nth-child(even):before,
  &:nth-child(even):after{
    background: $second-color;
  }
  
  label {
    text-align: left;
    bottom: calc(var(--rotate-label, 0) * 0.5px);
    left: 10px;
    position: absolute;
    width: 50%;
    z-index: 2;
    transform: rotate(calc(var(--rotate-label, 0) * 1deg));
  }
}