Use a CSS Linear Gradient to Create a Striped Element-help

Tell us what’s happening:

Your code so far


<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      40px[yellow --blend --blue]
      40px[green --bend --red]80px
    );
  }

</style>

<div></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element

You have set the correct parameter value till 45deg, after the deg, there will be 4 parameters each containing a color and px with a space between them,

Ex: (45deg, color px, …)

The above is a hint, try to fill it with the given instruction below containing values,

The color stop at 0 pixels should be yellow.
One color stop at 40 pixels should be yellow.
The second color stop at 40 pixels should be black.
The last color stop at 80 pixels should be black.

The solution is:
background: repeating-linear-gradient(
45deg,
yellow 0px;
yellow 40px,
black 40px;
black 80px;
);

It’s good that you were able to solve it but in the forums when helping people through the lessons we help by gently guiding them. We do not post the correct solution.
Thank you for understanding.

1 Like

Thanks Roma will keep that in mind next time before posting!