Линейный градиент , как делаются чёткий градиент по схеме?

#css3 #градиент

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

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



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



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




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

Ответы

Ответ 1

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



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%);
}


Ответ 2

В вашем случае вы тянете градиент под углом 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%);
}




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


Ответ 3

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



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%);

}