---
id: 587d78a5367417b2b2512ad7
title: Use a CSS Linear Gradient to Create a Striped Element
challengeType: 0
videoUrl: ''
localeTitle: Используйте линейный градиент CSS для создания полосатого элемента
---
## Description
Функция 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
Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.
## Instructions
Сделайте полосы, изменив repeating-linear-gradient()
чтобы использовать градиентный угол 45deg
, затем установите, чтобы первые два цвета остановились на yellow
, и, наконец, второй цвет прекратился до black
.
## Tests
```yml
tests:
- text: Угол repeating-linear-gradient()
должен быть 45deg.
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the repeating-linear-gradient()
should be 45deg.");'
- text: Угол repeating-linear-gradient()
должен превышать 90 градусов
testString: 'assert(!code.match(/90deg/gi), "The angle of the repeating-linear-gradient()
should no longer be 90deg");'
- text: Остановка цвета в 0 пикселях должна быть yellow
.
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be yellow
.");'
- text: Одна остановка цвета на 40 пикселей должна быть yellow
.
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be yellow
.");'
- text: Вторая остановка цвета на 40 пикселей должна быть black
.
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be black
.");'
- text: Последняя остановка цвета на 80 пикселей должна быть black
.
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be black
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```