如何制作径向导航栏？

Question

我正在尝试像下图一样进行径向导航，但只有四个按钮。 the implementation

我已经能够在某种程度上做到但无法达到预期的效果。灵感的主要来源是。我也希望这个导航能够快速响应。

如果有人指出我在哪里做错了会很有帮助。

JS FIDDLE： here

HTML

<div id="controls" class="container">
  <div class="wrapper" id="controlBtnWrapper">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
    </ul>
  </div>
</div>

CSS

/*Control wheel*/

#controls {
  background-color: #66afe9;
}

#controlBtnWrapper {
  background-color: white;
  height: 26em;
  width: 26em;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
}

#controlBtnWrapper ul {
  display: inline-block;
}

#controlBtnWrapper li {
  background-color: darkgray;
  width: 10em;
  height: 10em;
  overflow: hidden;
  list-style: none;
  position: absolute;
  transform-origin: 100% 100%;
  top: 50%;
  left: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
}

#controlBtnWrapper li a {
  background-color: darkmagenta;
  position: absolute;
  right: -7.25em;
  bottom: -7.25em;
  display: block;
  width: 14.5em;
  height: 14.5em;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 2;
  transform: skew(-60deg) rotate(-75deg) scale(1);
  pointer-events: auto;
}

#controlBtnWrapper li:first-child {
  transform: rotate(90deg);
}

#controlBtnWrapper li:nth-child(2) {
  transform: rotate(180deg);
}

#controlBtnWrapper li:nth-child(3) {
  transform: rotate(270deg);
}

#controlBtnWrapper li:nth-child(4) {
  transform: rotate(360deg);
}