Radial menu

by kthornbloom

HTML

<div class="compass-menu">
  <div class="cm-center-line-group">
    <div class="cm-center-line"></div>
    <div class="cm-center-line"></div>
    <div class="cm-center-line"></div>
    <div class="cm-center-line"></div>
    <div class="cm-center-line"></div>
    <div class="cm-center-line"></div>
  </div>
  <div class="cm-center">
    <div class="cm-locked-rotation"></div>
    <div class="cm-center-divider"></div>
    <div class="cm-center-divider"></div>
    <div class="cm-center-divider"></div>
    <svg class="cm-needle" width="53" height="75" viewBox="0 0 53 75" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M26.1466 57.5412L52.2932 74.2187L26.1466 6.48649e-06L0 74.2188L26.1466 57.5412Z" fill="#B2D236"/>
    </svg>
    <div class="cm-options">
    <a href="#" class="cm-option">
      <div class="cm-option-text">
        <span>Find</span>
        Something 1
      </div>
    </a>
    <a href="#" class="cm-option">
      <div class="cm-option-text">
        <span>Find</span>
        Something 2
      </div>
    </a>
    <a href="#" class="cm-option">
      <div class="cm-option-text">
        <span>Find</span>
        Something 3
      </div>
    </a>
    <a href="#" class="cm-option">
      <div class="cm-option-text">
        <span>Find</span>
        Something 4
      </div>
    </a>
    <a href="#" class="cm-option">
      <div class="cm-option-text">
        <span>Find</span>
        Something 5
      </div>
    </a>
    <a href="#" class="cm-option">
      <div class="cm-option-text">
        <span>Find</span>
        Something 6
      </div>
    </a>
    </div>
  </div>
</div>

CSS

:root {
  --background: #1F404D;
  --teal: #076375;
  --green: #B2D236;
  --scaledSize: clamp(100px, 20vw, 300px);
}

body {
  background: var(--background);
}

.compass-menu {
  position: relative;
  border: 1px solid white;
  padding: var(--scaledSize);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-center {
  width: clamp(100px, 20vw, 300px);
  height: clamp(100px, 20vw, 300px);
  box-shadow: inset 0 0 0 15px var(--teal);
  border-radius: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cm-needle {
  position: relative;
  top: -2.5%;
  width: 20%;
  height: auto;
}

.cm-center-divider {
  width: 100%;
  height: 5px;
  background: var(--background);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2.5px;
  transform-origin: center;
}

.cm-center-divider:nth-child(2){
  transform: rotate(60deg);
}

.cm-center-divider:nth-child(3){
  transform: rotate(-60deg);
}

.cm-center-line {
  height: var(--scaledSize);
  width: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  transform: rotate(0deg);
}

.cm-center-line:nth-child(2){
  transform: rotate(60deg);
}

.cm-center-line:nth-child(3){
  transform: rotate(120deg);
}

.cm-center-line:nth-child(4){
  transform: rotate(180deg);
}

.cm-center-line:nth-child(5){
  transform: rotate(240deg);
}
.cm-center-line:nth-child(6){
  transform: rotate(300deg);
}

.cm-locked-rotation {
  background: conic-gradient(#fff 0deg, #fff 60deg, transparent 60deg);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  transform-origin: center;
  transform: rotate(-30deg);
  display: flex;
  align-items: center;
  justify-content: center;
  &::after {
    content:'';
    background: var(--background);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
   ...