Use a CSS Linear Gradient to Create a Striped Element
Therepeating-linear-gradient()function is very similar tolinear-gradient()with the major difference that it repeats the specified gradient pattern.repeating-linear-gradient()accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.
The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
In the example demonstrated in the code editor, the gradient starts with the coloryellowat 0 pixels which blends into the second colorblueat 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third colorgreen, which itself blends into the fourth color valueredas that is 80 pixels away from the beginning of the gradient.
For this example, it helps to think about the color stops as pairs where every two colors blend together.