Градиенты в CSS3

Question

Помогите решить вопрос с градиентами в CSS3. Имеется следующий блок фиксированной высоты и ширины -

Я не понимаю, как к центру изображения сделать "смещение / уменьшение" линии градиента, чтобы получилось так, как на картинке. Линии, как бы уменьшаются и входят в одну точку, а затем возвращаются в исходное положение. Подскажите, какие варианты есть на этот счёт?

Задание стилей квадрату CSS:

.square {
    border-style: groove;
    border-width: 1px;
    border-color: black;
    width: 700px;
    height: 700px;
    -moz-box-shadow: 5px 5px 10px grey, -5px -5px 10px grey;
    -webkit-box-shadow: 5px 5px 10px grey, -5px -5px 10px grey;
    box-shadow: 5px 5px 10px grey, -5px -5px 10px grey;
}

Задание градиента CSS:

.gradient {
    background-image: repeating-linear-gradient(red, orange, yellow, green, cyan, blue, purple);
}

Результат вышеописанного:

Вам быстрее ответят на вопрос, если вы прикрепите код, который используете. Поправить быстрее, чем написать с нуля... — Sheridan, Oct 14 '19 at 08:33

score 1 · Answer 1 · answered Jul 28 '20 at 19:01

Делается с помощью радиального градиента

div {
  width: 400px;
  height: 400px;
  background: repeating-radial-gradient(ellipse 8px 1px at 60% 40%, orange, green 1px, lightblue 2px);
  transform: rotate(270deg);
}

<div></div>

Градиенты в CSS3

1 Answers1