The previous article covered the CSS features used to achieve the striping effect and implemented horizontal and vertical striping. Now let’s implement diagonal striping.

Remember what happened before

Horizontal stripes

background: linear-gradient(#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 100% 60px;
Copy the code

Vertical stripes

background: linear-gradient(90deg.#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 60px 100%;
Copy the code

One, oblique stripe

Now let’s try the effect of diagonal stripes.

First Try

Similar to vertical stripes, can we first try the effect of 45DEg Angle?

background: linear-gradient(45deg.#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 60px 60px;
Copy the code

Looks like it didn’t work the way we thought it would.

2. Diagonal Second Try double stripes

The first attempt failed, but the experience of failure is still there, and we found that in fact, the picture is slanted, but it’s monolithic slanted. So if every single piece of us can be seamless, is that the effect?? Let’s try the two-color striped one first

background: linear-gradient(45deg.#fb3 25%.#58a 0.#58a 50%.#fb3 0.#fb3 75%.#58a 0.#58a 100%);
background-size: 60px 60px;
Copy the code

We do this by making identical, seamless monolithic piecesseamlessMake up the oblique effect, the single piece in the image above

3. Diagonal Third Try

Let’s try the three stripes

background: linear-gradient(45deg.#fb3 16.6666%.#58a 0.#58a 33.3333%, yellowgreen 0, yellowgreen 50%.#fb3 0.#fb3 66.6666%.#58a 0.#58a 83.3333%, yellowgreen 0, yellowgreen 100%);
background-size: 60px 60px;
Copy the code

4. Diagonal Forth Try same color interval stripe

Try the same color interval stripe

background: linear-gradient(45deg.#58a 25%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 50%.#58a 0.#58a 75%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 100%);
background-size: 60px 60px;
Copy the code

The effect of skew should be mastered by now, we just need to follow the principle of seamless handover between slices.

5. Diagonal to the Fifth Try

Now that we have 45 degrees, let’s try 60 degrees. Let’s change 45 to 60.

background: linear-gradient(60deg.#58a 25%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 50%.#58a 0.#58a 75%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 100%);
background-size: 60px 60px;
Copy the code

Obviously failed, except for a 45 degree Angle.

6. Diagonal Sixth Try 60DEg

Don’t worry, there’s another way to use repeating-Linear-gradient to create repeated linear gradients. The usage is similar to Linear-gradient. But there are a few small details to pay attention to.

background: repeating-linear-gradient(60deg.#58a 25%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 50%.#58a 0.#58a 75%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 100%);
Copy the code

background-size: 60px 60px; Remember to delete size this time. We don’t need it anymore. Look, the following effect has been achieved, this method can achieve oblique stripes at any Angle.

conclusion

So far we have implemented most of the striping effects, including horizontal, vertical, oblique (45deg and arbitrary Angle). Background: Linear gradient(# FB3 33%, # 58A 0, # 58A 66%, YellowGreen 0); If you forget how to use it, go back to the beginning of the previous chapter.

  1. Horizontal stripe 
    background: linear-gradient(#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 100% 60px;
Copy the code
  2. Vertical stripes90deg 
    background: linear-gradient(90deg.#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 60px 100%;
Copy the code
  3. The diagonal stripes
    1. 45deg+ Seamless stitching of single stripe 
      background: linear-gradient(45deg.#fb3 25%.#58a 0.#58a 50%.#fb3 0.#fb3 75%.#58a 0.#58a 100%);
background-size: 60px 60px;
Copy the code
    2. repeating-linear-gradient()Remove the background – size 
      background: repeating-linear-gradient(60deg.#58a 25%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 50%.#58a 0.#58a 75%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 100%);
Copy the code

6. Complex Background patterns (PART 1)