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

285

24 июня 2017, 11:48

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

Answer 1

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

<svg viewBox="0 0 220 220" width="220" height="220"> 
    <defs> 
        <linearGradient id="gradient"> 
            <stop offset="0" style="stop-color:#0070d8" /> 
            <stop offset="0.5" style="stop-color:#2cdbf1" /> 
            <stop offset="1" style="stop-color:#83eb8a" /> 
        </linearGradient> 
    </defs> 
    <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /> 
</svg>

Answer 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; 
}

<div class="box"></div>

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

Answer 3

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  id="svg8" version="1.1" viewBox="0 0 297 210"> 
  <defs 
     id="defs2"> 
    <linearGradient 
       id="linearGradient853-5-9-6"> 
      <stop 
         id="stop849" 
         offset="0" 
         style="stop-color:#489c37;stop-opacity:1" /> 
      <stop 
         id="stop851" 
         offset="1" 
         style="stop-color:#2a3eff;stop-opacity:0.733" /> 
    </linearGradient> 
    <linearGradient 
       gradientUnits="userSpaceOnUse" 
       y2="194.94643" 
       x2="171.57741" 
       y1="193.43452" 
       x1="136.8512" 
       id="linearGradient885" 
       xlink:href="#linearGradient853-5-9-6" /> 
  </defs> 
  <g 
     transform="translate(0,-87)" 
     id="layer1"> 
    <ellipse 
       ry="78.619049" 
       rx="88.824409" 
       cy="195.70238" 
       cx="151.56847" 
       id="path10" 
       style="fill:none;fill-opacity:1;stroke:url(#linearGradient885);stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" /> 
  </g> 
</svg>

Answer 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; 
}

<div></div>

Answer 5

Можно использовать ответ @ArtemGorlachev как background для произвольного блока div:

div { 
  width: 250px; 
  height: 250px; 
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="220" height="220"><defs><linearGradient id="gradient"><stop offset="0" style="stop-color:#0070d8" /><stop offset="0.5" style="stop-color:#2cdbf1" /><stop offset="1" style="stop-color:#83eb8a" /></linearGradient></defs><ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /></svg>'); 
  background-size: 100%; 
}

<div></div>

Из-за бага IE/Edge,

This is a longstanding difference between IE/Edge and Webkit based browsers where they do not require almost any values to be escaped in SVG data uris, and we require the entire value after the “utf8,” to be fully escaped.

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

div { 
  width: 250px; 
  height: 250px; 
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' width='220' height='220'><defs><linearGradient id='gradient'><stop offset='0' style='stop-color:%230070d8' /><stop offset='0.5' style='stop-color:%232cdbf1' /><stop offset='1' style='stop-color:%2383eb8a' /></linearGradient></defs><ellipse ry='100' rx='100' cy='110' cx='110' style='fill:none;stroke:url(%23gradient);stroke-width:6;' /></svg>"); 
  background-size: 100%; 
}