CodePen

HTML

            
              %ul.round
  -(1..6).each do |i|
    %li.slice
      %div.segment
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $n: 5; /* number of slices */
$od: 20em; /* outer diameter */
$id: 10em; /* inner diameter */
$a: 360/$n; /* central angle */
$bg: silver;

html { overflow: hidden; background: $bg; }
.round {
  position: absolute;
  top: 50%; left: 50%;
  margin: -$od/2;
  padding: 0;
  width: $od; height: $od;
  list-style: none;
  &:after {
    $d: $id - ((sqrt(3)/2)*$id - ($od - $id)/1.5);
    position: absolute;
    top: 50%; left: 50%;
    margin: -$d/2;
    width: $d;
    height: $d;
    border-radius: 50%;
    opacity: 1;
    background: $bg;
    content: ''
  }
}
.round *, .round *:before {
  position: absolute;
  width: inherit; height: inherit;
}
.slice {
  margin: inherit;
  transform-origin: 100% 100%;
  @for $i from 1 through $n + 1 {
    &:nth-child(#{$i}) {
      transform: rotate(#{-$i*$a + $a/2}deg) skewY(#{90 - $a}deg);
    }
  }
  &:not(:first-child):after {
    position: absolute;
    right: -$id/4; bottom: $id/2;
    width: $id/2; height: $id/2;
    transform: skewY(#{$a - 90}deg) 
      rotate(-30deg) skewY(-30deg) scaleX(.866) scale(.8);
    background: linear-gradient(135deg, transparent 50%, darkorange 50%, orangered);
    content: '';
  }
  &:last-child .segment:before, &:last-child .segment:after { 
    background: transparent;
  }
}
.segment {
  overflow: hidden;
  &:before, &:after {
    right: 0; bottom: 0;
    margin: -$od/2;
    border-radius: 50%;
    transform: skewY(#{$a - 90}deg) rotate(#{-$a/2}deg);
    background: linear-gradient(90deg, gold, darkorange 66%);
    content: '';
  }
  &:after {
    position: absolute;
    margin: -$id/2;
    width: $id; height: $id;
    background: $bg;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................