markamoser.com/site/assets/scss/components/_pie.scss

.pie {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: $gutter;

  .key {
    flex: 1 1 auto;
    margin-left: calc(#{$gutter} + 1em);

    div {
      position: relative;
      margin-bottom: 0.6em;
      padding-left: 0.33em;

      &::before {
        position: absolute;
        top: 0.1em;
        left: -1em;
        width: 1em;
        height: 1em;
        content: '';
      }

      span {
        &:first-of-type {
          position: absolute;
          left: -99999px;
        }
      }
    }
  }

  ul {
    @include slim-ul;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    width: 100px;
    height: 100px;
  }

  li {
    position: absolute;
    left: 50px;
    width: 50px;
    height: 100px;
    overflow: hidden;
    transform-origin: left center;

    &::before {
      position: absolute;
      left: -50px;
      z-index: -1;
      border-radius: 100px 0 0 100px;
      width: 50px;
      height: 100px;
      content: "";
      transform-origin: right center;
    }

    @for $i from 0 through 360 {
      &.start-#{$i} {
        transform: rotate(#{$i}deg);
      }
    }

    @for $i from 0 through 360 {
      &.value-#{$i}::before {
        transform: rotate(#{$i + 1 }deg);
      }
    }

    // @for $i from 181 through 360 {
    //   &.value-#{$i} {
    //     width: 200px;
    //     height: 200px;
    //     transform-origin: center center;
    //
    //     &::before {
    //       left: -100px;
    //       width: 100px;
    //       height: 200px;
    //     }
    //
    //     &::after {
    //       position: absolute;
    //       left: -100px;
    //       border-radius: 0 100px 100px 0;
    //       width: 100px;
    //       height: 200px;
    //       content: "";
    //     }
    //   }
    // }
  }

  .blue {
    &::before,
    &::after {
      background-color: $blue;
    }
  }

  .dark-blue {
    &::before,
    &::after {
      background-color: $dark-blue;
    }
  }

  .orange {
    &::before,
    &::after {
      background-color: $orange;
    }
  }

  .red {
    &::before,
    &::after {
      background-color: $red;
    }
  }

  .yellow {
    &::before,
    &::after {
      background-color: $yellow;
    }
  }

  .dark-grey {
    &::before,
    &::after {
      background-color: $dark-grey;
    }
  }
}

@media screen and (min-width: 768px) {
  .pie {
    justify-content: flex-start;

    ul {
      width: 200px;
      height: 200px;
    }

    li {
      left: 100px;
      width: 100px;
      height: 200px;

      &::before {
        left: -100px;
        width: 100px;
        height: 200px;
      }
    }
  }
}