3

Подскажите пожалуйста, как можно сверстать этот элемент (именно круг). Подразумевается, что он должен быть динамическим

введите сюда описание изображения

1
  • Сам такого не делал, но везде пишут, что лучше использовать svg или canvas. Наверняка найдешь готовый пример в сети. 10 фев 2022 в 9:30

1 ответ 1

4

Вот что-то похоже, надеюсь помог

.circle {
  --p: 20;
  
  width: 200px;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  font-size: 25px;
  font-weight: bold;
  font-family: consolas;
}

.circle:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  z-index: -1;
  background: conic-gradient(green calc(var(--p)*1%), #0000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - 20px), #000 calc(100% - 20px));
          mask: radial-gradient(farthest-side, #0000 calc(99% - 20px), #000 calc(100% - 20px));
}
<div class="circle" style="--p:30"> 30%</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.