---
id: 587d78a5367417b2b2512ad7
title: Use a CSS Linear Gradient to Create a Striped Element
challengeType: 0
videoUrl: ''
localeTitle: Use um gradiente linear CSS para criar um elemento distribuído
---
## Description
A função de repeating-linear-gradient()
é muito semelhante ao linear-gradient()
com a principal diferença que repete o padrão de gradiente especificado. repeating-linear-gradient()
aceita uma variedade de valores, mas para simplificar, você trabalhará com um valor de ângulo e valores de parada de cor neste desafio. O valor do ângulo é a direção do gradiente. As paradas de cores são como valores de largura que marcam onde uma transição ocorre e são fornecidas com uma porcentagem ou um número de pixels. No exemplo demonstrado no editor de código, o gradiente começa com a cor yellow
em 0 pixels, que se mistura com a segunda cor blue
a 40 pixels de distância do início. Como a próxima parada de cor também é de 40 pixels, o gradiente muda imediatamente para a terceira cor green
, que se mistura com o quarto valor de cor red
, a 80 pixels do início do gradiente. Para este exemplo, é útil pensar nas paradas de cores como pares, onde cada duas cores se mesclam. 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
Se cada dois valores de parada de cor forem da mesma cor, a mesclagem não é perceptível porque está entre a mesma cor, seguida por uma transição difícil para a próxima cor, então você acaba com listras.
## Instructions
Faça listras alterando o repeating-linear-gradient()
para usar um ângulo de gradiente de 45deg
, depois defina as duas primeiras cores para yellow
e, finalmente, a segunda cor para black
.
## Tests
```yml
tests:
- text: O ângulo do repeating-linear-gradient()
deve ser 45deg.
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the repeating-linear-gradient()
should be 45deg.");'
- text: O ângulo do repeating-linear-gradient()
não deve mais ser 90 graus
testString: 'assert(!code.match(/90deg/gi), "The angle of the repeating-linear-gradient()
should no longer be 90deg");'
- text: A parada de cor em 0 pixels deve ser yellow
.
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be yellow
.");'
- text: Uma parada de cor em 40 pixels deve ser yellow
.
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be yellow
.");'
- text: A segunda parada de cor em 40 pixels deve ser black
.
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be black
.");'
- text: A última parada de cor em 80 pixels deve ser 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
```