.ccm-hex { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.ccm-hex-c, .ccm-hex-i { width: 50px; height: 58px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 system-ui, sans-serif; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.ccm-hex-c { background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; position: relative; z-index: 2; }
.ccm-hex-i { position: absolute; top: 50%; left: 50%; margin: -29px -25px; background: #1f1f2e; color: #c4b5fd; transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1)); }
.ccm-hex-i:hover, .ccm-hex-i:focus-visible { background: #2a2a3e; color: #fff; transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1)) scale(1.1); } <div class="ccm-hex">
<a href="#" class="ccm-hex-c" aria-label="Center">◆</a>
<a href="#" class="ccm-hex-i" style="--a:-90deg" aria-label="N">N</a>
<a href="#" class="ccm-hex-i" style="--a:-30deg" aria-label="NE">NE</a>
<a href="#" class="ccm-hex-i" style="--a:30deg" aria-label="SE">SE</a>
<a href="#" class="ccm-hex-i" style="--a:90deg" aria-label="S">S</a>
<a href="#" class="ccm-hex-i" style="--a:150deg" aria-label="SW">SW</a>
<a href="#" class="ccm-hex-i" style="--a:210deg" aria-label="NW">NW</a>
</div>
Live preview Edit any tab — preview updates live Ready