带有透明内边框的多色圆圈

Question

我几乎就在那里，但我正在努力制作一个透明的内部边界。这是我想要实现的目标的链接：Multi-colored circle with transparent inner border

这是我到目前为止所做的： [带灰色中心圆的多色圆圈] [2]

这是scss：

@mixin circle($size) {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - #{$size/2});
top: calc(50% - #{$size/2});
width: $size;
height: $size;
}

$wheel: 20em;
$colors: (#f9a260, #f57d42, #f0463e, #c14273, #86489b, #008fca, #00bced, 
#00b8a9, #82ba75, #9bcb61, #f6e04e, #f4c64d);

.m-callout3 {
overflow: hidden;
width: $wheel;
height: $wheel;
position: relative;
&__colours {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    height: 100%;
    margin: 0;
}
&__colour {
    @include circle($wheel);
}
&__colour, &__colour:nth-child(n+7):after {
    clip: rect(0, $wheel, $wheel, #{$wheel/2});
}
&__colour:after, &__colour:nth-child(n+7) {
    @include circle($wheel);
    clip: rect(0, #{$wheel/2}, $wheel, 0);
}
@for $i from 0 to length($colors) {
    &__colour:nth-child(#{1+$i}):after {
        background-color: nth($colors, $i+1);
        @if $i < 6 {
            transform: rotate(#{30*(1+$i)}deg);
            z-index: #{length($colors)-$i};
        } @else {
            transform: rotate(#{-30+(30*(1+$i))}deg);
        }
    }
}
&__center {
    @include circle($wheel - 2em);
    background: $dark-gray;
    color: #fff;
    z-index: 13;
}
&__content {

    text-align: center;
    padding: 1.5em;
    p {
        font-size: 2em;
        margin-bottom: 0;
    }
    span {
        font-family: $font-light;
        font-size: 1em;

    }
  }
}

这是HTML：

<div class="m-callout3">
<div class="m-callout3__center">
    <div class="m-callout3__content">
        <p>£3 million</p><span>Business Centre</span>
    </div>
</div>
<ul class="m-callout3__colours">
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
    <div class="m-callout3__colour"></div>
</ul>

如果有人能说清楚，我会非常感激。

**几乎在承诺的土地上!!只是努力拥有所有12个颜色部分，目前还有11个：https://codepen.io/snarf1974/pen/aywZZJ

任何人都可以光明吗？ **