Я хочу, чтобы иметь возможность рисовать круг с его сегментом другого цвета, я хотел бы, чтобы количество охватываемого сегмента увеличивалось с шагом 10%
от 0%
до 100%
.
Любые примеры в Google - это все сектора, а не сегменты.
Пока это лучшее, что я смог придумать:
div.outerClass {
position: absolute;
left: 10px;
top: 10px;
height: 2.5px;
overflow: hidden;
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
div.innerClass {
width: 10px;
height: 10px;
border: 5px solid green;
border-radius: 36px;
}
<div class="outerClass">
<div class="innerClass"></div>
</div>