如何在CSS中绘制环形扇区？

Question

我想在我的html中绘制这样的图形。 我需要绘制一个环形扇区，因为我的圆圈可以包含不同数量的不同扇区。

我可以使用canvas或SVG绘制环形扇区，但是如何在css中进行绘制？

更新

这是我的解决方案，但我的边框有问题。有人能帮助我吗？

＆＃13;

＆＃13;

.circle {
    background: #aaa;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid red;
}
.center {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    z-index: 100;
    background: #eee;
    border-radius: 50%;
    border: 1px solid red;
    opacity: 1;
}

.item {
    background: #aaa;
    overflow: hidden;
    position: absolute;
    width: 100px;
    height: 100px;
    transform-origin: 100% 100%;
    border: 1px solid red;
    opacity: 1
}

.item {
    z-index: 1;
    transform: rotate(60deg);
}
.item:nth-child(2) {
    z-index: 2;
    transform: rotate(120deg);
}
.item:nth-child(3) {
    z-index: 3;
    transform: rotate(180deg);
}
.item:nth-child(4) {
    z-index: 4;
    transform: rotate(240deg);
}
.item:nth-child(5) {
    z-index: 5;
    transform: rotate(300deg);
}
.item-wrapper {
    position: absolute;
    width: 100px;
    height: 100px;
    overflow: hidden;
    transform-origin: 100% 100%;
    border: 1px solid blue;
}
.item-wrapper > .item {
    z-index: 12;
    transform: rotate(-30deg);
}
.sector{
    background: #ddd;
    overflow: hidden;
    position: absolute;
    width: 100px;
    height: 100px;
    transform-origin: 100% 100%;
    border: 1px solid green;
    transform: rotate(-30deg);   
}
.sector:nth-child(2){
    transform: rotate(30deg);  
}
.item-wrapper > .item > .sector {
    transform: rotate(-30deg);
}
.item-wrapper > .item > .sector:nth-child(2) {
    transform: rotate(60deg);
}

.sector:hover {
    background: #eee
}

＆＃13;

    <div class="circle">
        <div class="item">
            <div class="sector">1</div>
            <div class="sector">2</div>
        </div>
        <div class="item">
            <div class="sector">3</div>
            <div class="sector">4</div>
        </div>
        <div class="item">
            <div class="sector">5</div>
            <div class="sector">6</div>
        </div>
        <div class="item">
            <div class="sector">7</div>
            <div class="sector">8</div>
        </div>
        <div class="item">
            <div class="sector">9</div>
            <div class="sector">10</div>
        </div>
        <div class="item-wrapper">
            <div class="item">
            <div class="sector">11</div>
            <div class="sector">12</div>
            </div>
        </div>
        <div class="center">
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;