一个圆圈仅使用CSS分为16个部分

Question

任何帮助表示感谢。

我需要一个分成16个相等段的圆圈，顶部半球8个，底部8个。类似外圈的内圈重叠的东西，然后是马车轮辐，以形成分段。

这是我有多远：https://jsfiddle.net/rxyscrs8/

＆＃13;

＆＃13;

.container {
  position: relative;
}

div.field {
  border: 1px solid;
  border-radius: 50%;
  background-color: green;
  margin: 0 auto;
}

div.entire-field {
  width: 300px;
  height: 300px;
}

div.inner-field {
  position: absolute;
  width: 150px;
  height: 150px;
}

.quarter {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: background-color 0.2s ease-in-out;
}

.quarter1 {
  top: 0;
  left: 0;
  border: 1px solid white;
  border-radius: 100% 0 0 0;
}

.quarter2 {
  top: 0;
  right: 0;
  border: 1px solid white;
  border-radius: 0 100% 0 0;
}

.quarter3 {
  bottom: 0;
  left: 0;
  border: 1px solid white;
  border-radius: 0 0 0 100%;
}

.quarter4 {
  bottom: 0;
  right: 0;
  border: 1px solid white;
  border-radius: 0 0 100% 0;
}

＆＃13;

<div class="field entire-field">
  <div class="quarter quarter1"></div>
  <div class="quarter quarter2"></div>
  <div class="quarter quarter3"></div>
  <div class="quarter quarter4"></div>
</div>
<div class="field inner-field">
  <div class="quarter quarter1"></div>
  <div class="quarter quarter2"></div>
  <div class="quarter quarter3"></div>
  <div class="quarter quarter4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？