Pie Slice Selector — Live CSS Playground

{CF} CodeFronts Back to CSS Circular Menus Pie Slice Selector Pure CSS

.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; }

<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>

Live preview Edit any tab — preview updates live Ready