Чтобы плавный градиент превратить в четкие полоски, нужно максимально сблизить разные цвета. Там где заканчивается первый цвет, сразу же начинается второй, и вместо градиентного перехода мы имеем резкую границу.
Выглядит это вот так linear-gradient(yellow 50%, green 50%)
.
Но указывать для второго цвета точную позицию необязательно, можно просто указать 0
, а умный браузер уже сам подставит его куда нужно.
.block{
/*соотношение цветов*/
background:
linear-gradient(yellow 30%, green 0);
/*размер повторяющегося фона*/
background-size:100% 30px;
}
.block{
background:linear-gradient(to right, yellow 30%, green 0);
background-size:50px 100%;
}
.block{
background:
repeating-linear-gradient(45deg,
yellow, yellow 15px, green 0, green 30px);
}
/*или так*/
.block{
background:
linear-gradient(45deg, yellow 25%, green 0,
green 50%, yellow 0, yellow 75%, green 0);
background-size:30px 30px;
}
.block{
background: repeating-linear-gradient(125deg, yellow, green, yellow 30px);
}
2 комментария