Почему края моего градиента c не острые? - PullRequest
0 голосов
/ 24 марта 2020

Я пытаюсь создать вид диаграммы p ie, используя CSS coni c -градиенты. Я хочу, чтобы каждый переход между клиньями был жестким, а не мягким.

В pie1, ниже, переходы жесткие, но добавление дополнительного клина (как в pie2) делает все переходы мягкими.

Может кто-нибудь сказать мне, почему? И как этого избежать?

(я использую 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>

Image in Chome on Windows

...