4

Вопрос с mail.ru но меня заинтересовало именно реализация !

Каким образом можно реализовать такой градиент :

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

я пытался так но получается размытый градиент:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(45deg, red 20%, yellow 20%, red 30%, yellow 30%);
}

Как это реализовать правильно согласно схеме ?

1

3 ответа 3

5

Чтобы краница была чёткой, надо одну и ту же позицию указать дважды подряд:

html, body {
  margin: 0;
  height: 100%;
  background: linear-gradient(45deg, white 20%, black 20%, black 30%, white 30%);
}

Чтобы чуть улучшить сглаживание для произвольных углов, можно добавить 1px:

html, body {
  margin: 0;
  height: 100%;
  background: linear-gradient(45deg, white 20%, black calc(20% + 1px), black 30%, white calc(30% + 1px));
}

А чтобы эта штука повторялась, надо использовать repeating-linear-gradient:

html, body {
  margin: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, white, white 10%, black 10%, black 20%);
}

html, body {
  margin: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, white, white calc(10% - 1px), black 10%, black calc(20% - 1px), white 20%);
}

3

В вашем случае вы тянете градиент под углом 45 градусов, до 20% красный, от 20% до 30% желто красный(вот тут как раз перелив) от 30% желтый. А вам надо например: под углом 45 градусов, красный до 25%, желтый от 25%, желтый до 50%, красный от 50%, красный до 75%, желтый от 75%, понимаете?) вот так:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(45deg, red 25%, yellow 25%, yellow 50%, red 50%, red 75%, yellow 75%);
}

То есть цвет должен быть как бы встык, участок от желтого к желтому, потом в тот же период от красного к красному, нельзя на разных размерах ставить разный цвет - от этого получается перелив. Это если полоски хотите получить.

2

Попытки удались , реализация

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:linear-gradient(
45deg, 
black  5%, yellow 0%,
yellow 10%, black 0%,
black 15%,  yellow 0%,
yellow 20%, black 0%,
black 25%,  yellow 0%,
yellow 30%, black 0%,
black 35%,  yellow 0%,
yellow 40%, black 0%,
black 45%,  yellow 0%,
yellow 50%, black 0%,
black 55%,  yellow 0%,
yellow 60%, black 0%,
black 65%,  yellow 0%,
yellow 70%, black 0%,
black 75%,  yellow 0%,
yellow 80%, black 0%,
black 85%,  yellow 0%,
yellow 90%, black 0%,
black 95%,  yellow 0%,
yellow 100%, black 0%);

}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.