Окружность с градиентом

#css

Как создать такую окружность, как на рисунке?
На рисунке есть ещё задний фон. Можно нарисовать круг с градиентом, и с помощью :before
закрыть внутреннюю часть по периметру, но как тогда показать задний фон через :before?

    

Ответы

Ответ 1

Используя пример ответа @Максим Ленский, сгенерированный генератором, можно сделать
читабельный и понятный вариант:






Ответ 2

Как вариант можно использовать mask-image:



.box {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #0B73D3, #37DAEF, #86E98E);
  -webkit-mask-image: radial-gradient(circle at center, transparent 67%, white 68%);
  mask-image: radial-gradient(circle at center, transparent 67%, white 68%);
}

body {
  background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
  background-size: cover;
}





Но, к сожалению, поддержка браузерами оставляет желать лучшего.


Ответ 3

Как обычно такими вещами занимается svg , рекомендую почитать о этой прелести, есть
отличный сайт администратор которого присусвует на ruSO







Ответ 4

Можно сделать это чистым CSS без SVG, но тогда придётся явно задавать цвет фона для
картинки:



div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  /* Явно задаём белый цвет */
  background-color: white;
}

div:after {
  content: "";
  background: linear-gradient(#0070d8, #2cdbf1, #83eb8a);
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border-radius: 50%;
  z-index: -1;
}



Ответ 5

Можно использовать ответ @ArtemGorlachev и немного его модифицировать для того, чтобы
он растягивался под произвольный блок:








Можете сделать SVG либо отдельным файлом (предпочтительный способ), либо как часть
значения background (представленный ниже код будет работать только в webkit браузерах):



div {
  width: 250px;
  height: 250px;
  background: url('data:image/svg+xml;utf8,');
}





Для того, чтобы код работал в MS Edge и Firefox символы внутри url должны быть escaped
после кодировки utf8, для них результат с учётом обходного пути (замена двойных кавычек
на одинарные, # на %23 и % на %25) будет выглядет так:



div {
  width: 250px;
  height: 250px;
  background: url("data:image/svg+xml;utf8,");
  background-size: 100% 100%; /* Фикс для Firefox, чтобы изображение корректно растягивалось */
}