<div class="ccm-pie">
  <a href="#" class="ccm-pie-s ccm-pie-tr" style="--c: #7c6cff" aria-label="Plan"
    ><span>Plan</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-br" style="--c: #ff6c8a" aria-label="Build"
    ><span>Build</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-bl" style="--c: #2ecc8a" aria-label="Test"
    ><span>Test</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-tl" style="--c: #f5a84a" aria-label="Ship"
    ><span>Ship</span></a
  >
  <span class="ccm-pie-h" aria-hidden="true"></span>
</div>

.ccm-pie {
  position: relative;
  width: 170px;
  height: 170px;
}

.ccm-pie-s {
  position: absolute;
  width: 50%;
  height: 50%;
  background: var(--c);
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.2s;
  display: flex;
}

.ccm-pie-tr {
  top: 0;
  right: 0;
  border-top-right-radius: 100% 100%;
  transform-origin: 0% 100%;
}

.ccm-pie-br {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 100% 100%;
  transform-origin: 0% 0%;
}

.ccm-pie-bl {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 100% 100%;
  transform-origin: 100% 0%;
}

.ccm-pie-tl {
  top: 0;
  left: 0;
  border-top-left-radius: 100% 100%;
  transform-origin: 100% 100%;
}

.ccm-pie-s span {
  margin: auto;
  padding: 8px 18px;
  font:
    700 12px/1 system-ui,
    sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ccm-pie-s:hover,
.ccm-pie-s:focus-visible {
  filter: brightness(1.18) saturate(1.15);
  transform: scale(1.04);
  z-index: 2;
}

.ccm-pie-h {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #15151d;
  border: 3px solid #17171f;
  pointer-events: none;
  z-index: 3;
}