Радиальный градиент в форме кольца в CSS

Я хотел бы создать форму кольца с заданной толщиной (в пикселях) с радиальным градиентом. Желаемый результат:

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

Однако я не знаю, как указать толщину в пикселях и обеспечить плавный переход цвета от зеленого к прозрачному (не обрезать). Мое текущее состояние:

div {
  background-image: radial-gradient(transparent, green, transparent);
  border-radius: 100%;
  height: 300px;
  width: 300px;
}
<div></div>

Есть ли способ сделать это в HTML и CSS без использования холста или svg (fiddle). Я не могу использовать изображение, потому что я хотел бы отобразить эту форму разной ширины и толщины.


css radial-gradients
person Michal    schedule 08.09.2020    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вот решение, которое даст вам именно ту толщину 50px, которую вы хотите. Вы также можете сделать его переменной, чтобы настроить его по своему усмотрению:

.box {
  --t:50px;
  
  background:
    radial-gradient(farthest-side,transparent calc(100% - var(--t)), green, transparent 100%);
  display:inline-block;
  height: 250px;
  width: 250px;
}
<div class="box"></div>
<div class="box" style="--t:80px;"></div>
<div class="box" style="--t:100px"></div>

person Temani Afif    schedule 08.09.2020

arrow_upward
2
arrow_downward

Вы можете поиграть с радиальным градиентом CSS на этом сайте.

Я добился того, что вы хотите, вот демонстрация. Просто поиграйте с процентами, чтобы получить желаемый результат.

div {
    background: radial-gradient(circle, rgba(0,128,0,0) 50%, rgba(0,128,0,1) 60%, rgba(0,128,0,0) 70%);
    width: 300px;
    height: 300px;
}
<div></div>

person evilReiko    schedule 08.09.2020

arrow_upward
1
arrow_downward 

div {
  background-image: radial-gradient(transparent, transparent 100px, green 150px, transparent 200px, transparent);
  border-radius: 100%;
  height: 300px;
  width: 300px;
}
<div></div>

Я только что использовал несколько случайных значений пикселей. Отредактируйте их в соответствии с вашими требованиями. Вот Santax: radial-gradient(color width, color width, color width, ...) ширина может быть установлена ​​в px, rem, % или любых единицах CSS.

person Kavindu Pasan Kavithilaka    schedule 08.09.2020

arrow_upward
0
arrow_downward

Это не идеальная копия, но достаточно близкая. Хитрость заключается в использовании маски.

div {
  border-radius:50%;
  background:linear-gradient(green, green, green);
  -webkit-mask: radial-gradient(transparent 330px, #000 90px);
          mask: radial-gradient(transparent 330px, #000 90px);
}
div:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box"></div>
person Anthony Gedeon    schedule 08.09.2020