https://codepen.io/jh3y/pen/aQomdd

<div class="pie">
  <div class="pie__segment" style="--offset: 0; --value: 25; --bg: #db0a5b;"></div>
  <div class="pie__segment" style="--offset: 25; --value: 10; --bg: #22a7f0;"></div>
  <div class="pie__segment" style="--offset: 35; --value: 60; --bg: #2ecc71; --over50: 1;"></div>
  <div class="pie__segment" style="--offset: 95; --value: 5; --bg: #4d05e8;"></div>
</div>
<div class="actions">
  <label>Offset</label>
  <label>Value</label>
  <input type="number" min="0" max="360" step="1" value="0"/>
  <input type="number" min="0" max="360" step="1" value="25"/>
  <input type="number" min="0" max="360" step="1" value="25"/>
  <input type="number" min="0" max="360" step="1" value="10"/>
  <input type="number" min="0" max="360" step="1" value="35"/>
  <input type="number" min="0" max="360" step="1" value="60"/>
  <input type="number" min="0" max="360" step="1" value="95"/>
  <input type="number" min="0" max="360" step="1" value="5"/>
</div>

.pie {
  border-radius: 100%;
  height: calc(var(--size, 200) * 1px);
  overflow: hidden;
  position: relative;
  width: calc(var(--size, 200) * 1px);
}
.pie__segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
}
.pie__segment:after,
.pie__segment:before {
  background: var(--bg, #e74c3c);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}
.pie__segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 0%;
}
.pie__segment:after {
  opacity: var(--over50, 0);
}
* {
  box-sizing: border-box;
}
body {
  align-items: center;
  background: #111;
  color: #fafafa;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  justify-content: center;
  min-height: 100vh;
}
label {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
input {
  min-width: 80px;
}
.actions {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto auto;
  z-index: 99;
}

const pie = document.querySelector('.pie');
const actions = document.querySelector('.actions');
const segments = pie.children;

const updateSegment = e => {
  const idx = [...actions.children].indexOf(e.target);
  const key = idx % 2 === 0 ? 'offset' : 'value';
  const toUpdate = segments[Math.floor(idx / 2) - 1];
  toUpdate.style.setProperty(`--${key}`, e.target.value);
};
window.addEventListener('input', updateSegment);