动态圆导航菜单

Question

以下是要求：

1. 任何“导航”部分（导航1， 导航2，选择导航3）。
2. 任何“导航”部分（导航1， 导航2，选择导航3）。如果单击导航1， 它将转到另一个页面，与导航2和导航3相同。

我搜索了一个上下限的示例，所有搜索结果都指向使用css，但这需要手动确定项目的位置。

.text
{
cursor:pointer;
}
.circle {
  position: relative;
  border: 0px;
  padding: 0;
  margin: 1em auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
li {
  overflow: hidden;
  position: absolute;
  top: -20%;
  right: -20%;
  width: 70%;
  height: 70%;
  transform-origin: 0% 100%;
  
}

.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(-60deg) rotate(15deg);
  padding-top: 20px;
}
li:first-child {
  transform: rotate(0deg) skewY(30deg);
  border-left: 8px solid #fff;
   border-right: 8px solid #fff;
}
li:nth-child(2) {
  transform: rotate(120deg) skewY(30deg);
   border-right: 8px solid #fff;
   border-left: 8px solid #fff;
}
li:nth-child(3) {
  transform: rotate(240deg) skewY(30deg);
  border-right: 8px solid #fff;
  border-left: 8px solid #fff;
}
li:first-child .text {
  background: green;
}
li:nth-child(2) .text {
  background: tomato;
}
li:nth-child(3) .text {
  background: aqua;
}
li:nth-child(3) .text:hover {
  background-color: #a5e2f3;
 
}
li:nth-child(2) .text:hover {
  background-color: #86d8ef;
  
}
li:nth-child(1) .text:hover {
  background-color: #66ceeb;
 
}
.cn-button {
	position: absolute;
	top: 40%;
	left: 50%;
	z-index: 11;
	margin-top: -2.25em;
	margin-left: -2.25em;
	padding-top: 0;
	width: 4.5em;
	height: 4.5em;
	border: 1px solid;
	border-radius: 50%;
	background: none;
	background-color: yellow;
	color: yellow;
	text-align: center;
	font-weight: 700;
	font-size: 1.5em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
}
.icon {
  position: absolute;
  /* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
 
  top: 40%;
  /* make sure it it rotated enough; angle of rotation = angle of the sector itself */
  transform: rotate(224deg);
  /* style further as needed */
  color: #fff;
  font-family: Indie Flower;
  font-size: 25px;
}

<button class="cn-button" id="cn-button"></button>
<ul class="circle">
  <li>
  <a class="one" href="circle.html">
    <div class="text" ><span class="icon">Navigation 1</span></div>
	</a>
  </li>
  <li>
  <a class="two" href="circle2.html">
    <div class="text"><span class="icon">Navigation 2</span></div>
	</a>
  </li>
  <li>
  <a class="three" href="circle3.html">
    <div class="text"><span class="icon">Navigation 3</span></div>
	</a>
  </li>
</ul>

我想要精确的像。

如何创建这样的菜单以动态添加项目？