Я пытаюсь создать вид диаграммы 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>