css - 为什么我的圆锥渐变的边缘不锋利？

Question

我正在尝试使用 CSS conic-gradients 创建一种饼图。我希望每个楔子之间的过渡都是硬的，而不是软的。

在下面的饼图 1 中，过渡是硬的，但是添加一个额外的楔形（如饼图 2 中），会使所有的过渡都变得柔和。

谁能告诉我为什么？以及如何避免这种情况？

（我正在使用 Chrome 80 顺便说一句）。

.pie1 { 
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;  
    background: conic-gradient(
        #FF6666 11%, 
        #FF8080 11%, #FF8080 15%, 
        rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, 
		
        #FF9933 20%, #FF9933 27%,
        #FFB366 27%, #FFB366 31%,
        rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 35%,

        #996600 35%, #996600 42%,             
        rgba(255, 255, 255, 0) 42%);
}

.pie2 { 
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;  
    background: conic-gradient(
        #FF6666 11%, 
        #FF8080 11%, #FF8080 15%, 
        rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, 

        #FF9933 20%, #FF9933 27%,
        #FFB366 27%, #FFB366 31%,
        rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 35%,

       #996600 35%, #996600 42%,   
       #FFC34D 42%, #FFC34D 47%,       
       rgba(255, 255, 255, 0) 47%)
}

<div class="pie1"></div>
<div class="pie2"></div>