Как залить бордер у блока на 15%-25%-50%-75%100%?

Question

[Super Star]

Подскажите как сделать такое?

Answer 1

[SerzN1]

take.ms/Vxq9N

<div id="circle" style="
    border-radius: 50%;
    border-width: 4px;
    height: 200px;
    width: 200px;
    border-color: blue;
    border-style: solid;
    border-bottom-color: red;
    transform: rotate(45deg);
"></div>

можно сжелать 3-4 класса с вариантами заполнения окружности и подсовывать их по назначению, это самый простой вариант

посложнее будут 2 вложенных элемента с overflow:hidden

Answer 2

[vistar]

Как-то так?
codepen.io/vistar/pen/jEyedv
Форк отсюда codepen.io/shawkdsn/pen/ejBJw, для своих нужд.
Думаю несложно сделать и для окружности.

Comments

[Super Star]

сам я нашел что-то подобное www.cssscript.com/pure-css-circular-percentage-bar

Answer 3

[hvaw]

В книге секреты Css это сделано с помощью :after, просто вращаете блок внутри круга и постепенно уменьшаете его размеры

Comments

[Super Star]

Пошел искать книгу

[Алексей Ярков]

Андрей Рысь: lea.verou.me/css3-secrets/#intro
lea.verou.me/more-css-secrets/#intro