Блог

Главная - Вопросы по программированию - Как изменить радиальный градиент на квадрат

Как изменить радиальный градиент на квадрат

#css #gradient #linear-gradients #css-gradients

#css #градиент #линейные градиенты #css-градиенты

Вопрос:

Как мне изменить градиент красного круга на квадрат?

Это все, что я пытаюсь сделать в коде.

Можно ли это сделать?

https://jsfiddle.net/ub1nyfqj/

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

 .test {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(red 1px, transparent 1px),
    radial-gradient(red 1px, transparent 1px),
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 0 0, -5px -5px, 0 0, 0 0;
} 
 <div class="test"></div>

Ответ №1:

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

 .test {
  width: 100px;
  height: 100px;
  background-image: conic-gradient(red 90deg, transparent 90deg 270deg),
  linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 0 0, -5px -5px, 0 0, 0 0;
} 
 <div class="test"></div>

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

Ответ №2:

Кажется, это дает эффект.

https://jsfiddle.net/7zpr9htf/

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

 .test {
  width: 100px;
  height: 100px;
  background-image:
    conic-gradient(red 9deg, transparent 0 180deg),
    conic-gradient(red 9deg, transparent 0 180deg),
    conic-gradient(red 9deg, transparent 0 180deg),
    conic-gradient(red 9deg, transparent 0 180deg),
    linear-gradient(45deg,

      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 44px -11px, 15px -11px, 20px -6px, 9px -6px, -5px -5px, 0 0, 0 0;
} 
 <div class="test"></div>

Комментарии:

1. Пожалуйста, объясните ответ

Метки: