Как еще можно сделать неполные круги на CSS?

Question

[sergey]

сделал вот так, но тут понятно что прозрачность только по 4 сторонам: top, right, bottom и left
jsfiddle

как еще это можно реализовать, что бы скажем прозрачность была слева в верху (типа left-top...) или другими словами как менять размер этой прозрачности в круге?
Или просто брать и трансформировать (переворачивать) круг по оси, чтобы пробелы были в нужных местах?

Answer 1

[Stalker_RED]

Есть же transform: rotate()

Или вообще так: https://css-tricks.com/css-pie-timer/
Демо: codepen.io/HugoGiraudel/pen/BHEwo

Comments

[sergey]

как одновременно объединить свойства: rotate(15deg) и translate(-50%, -50%)?

[Stalker_RED]

SM: transform: rotate(15deg) translate(-50%, -50%);

[sergey]

Stalker_RED: уже разобрался, благодарю

Answer 2

[Андрей Гончаров]

такие вещи свгшками делаются, на css если и будет решение, то громоздкое.

Comments

[sergey]

svg к сожалению в макете отсутствует