Как правильно расположить закругленные конечные границы на круговом графике, используя только CSS? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать круговой график, используя только CSS и HTML, где каждый сегмент имеет границу с закругленными концами как в начале, так и в конце. Однако мне сложно расположить псевдоэлементы ::before и ::after, чтобы правильно обозначить начало и конец границы каждого сегмента.
Вот над чем я сейчас работаю:

• Я использую конический градиент, чтобы заполнить круг в процентах (

  Код: Выделить всё

  --value

  ).
• Я хочу добавить небольшие закругленные границы (диаметром 12 пикселей) в начале (

  Код: Выделить всё

  ::before

  ) и конец (

  Код: Выделить всё

  ::after

  ) границы для каждого сегмента.

Я использую Calc() вместе с cos() и sin( ), чтобы попытаться вычислить позицию псевдоэлемента ::after на основе процента заполненного круга (

Код: Выделить всё

--value). Однако, похоже, он работает неправильно.
Как я могу точно расположить псевдоэлемент ::after в конце заполненного сегмента на круговом графике, гарантируя, что он выравнивается по краю закрашенной дуги?
Спасибо за помощь!
Это упрощенная версия моего CSS:
.circular {
&__graph {
grid-area: b;
max-width: 100%;
width: 100%;
margin-top: 36px;
justify-content: center;
display: flex;
flex-direction: column;
padding-left: 65px;

&-chart{
display: flex;
width: 100%;
height: 500px;
}
}

&__circles{
display: flex;
align-content: center;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}

&__dial-circle {
--size: 320px;
--thickness: 12px;
width: var(--size);
height: var(--size);
border-radius: 60%;
background: conic-gradient(var(--color, #1e90ff) calc(var(--value)* 1%), #F9F9F9 0);
mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), white calc(100% - var(--thickness) + 1px));
position: absolute;
//transform: rotate(180deg);

&::before, &::after {
content: ' ';
width: 12px;
height: 12px;
position: absolute;
background: var(--color, #1e90ff);
left: calc(50% - 7px);
top: 0;
border-radius: 50%;
}

&::after{
border: 1px solid red;
--angle: calc(var(--value) * 3.6);
--radius: calc((var(--size) / 2) - var(--thickness));

left: calc(50% + var(--radius) * cos(var(--angle) * (pi / 180)) - 6px);
top: calc(50% + var(--radius) * sin(var(--angle) * (pi / 180)) - 6px);

}
}
}

Вот мой HTML для этого примера:

Код: Выделить всё

Вот живой пример: https://codepen.io/JonJonCS/pen/BaXopEE
Я пробовал использовать cos() и sin() в Calc() для размещения элемента ::after в конце заполненного сегмента. Я ожидал, что элемент ::after появится точно на краю закрашенной дуги, но вместо этого он расположен неправильно и не совпадает с краем сегмента. Я надеялся, что красный кружок будет обозначать точный конец границы.

Подробнее здесь: https://stackoverflow.com/questions/790 ... g-only-css