Используйте линейный градиент CSS для создания полосатого элемента
Функция repeating-linear-gradient() очень похожа на linear-gradient() с большой разницей, что повторяет заданный шаблон градиента. repeating-linear-gradient() принимает множество значений, но для простоты вы будете работать с значениями угла и значениями остановки цвета в этой задаче. Значением угла является направление градиента. Остановки цвета - это значения ширины, которые указывают, где происходит переход, и даются с процентом или количеством пикселей. В примере, показанном в редакторе кода, градиент начинается с yellow цвета в 0 пикселей, который смешивается со вторым blue цветом в 40 пикселей от начала. Так как следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий green цвет, который сам вписывается в четвертое значение цвета red которое составляет 80 пикселей от начала градиента. В этом примере это помогает думать о цветовых остановках как о парах, где смешиваются два разных цвета. 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.
Сделайте полосы, изменив repeating-linear-gradient() чтобы использовать градиентный угол 45deg , затем установите, чтобы первые два цвета остановились на yellow , и, наконец, второй цвет прекратился до black .