In our development, we often have stripe patterns of various sizes, colors, and angles to implement,

In the past, my first thought was to add elements in an unordered list and then control the different colors, which would have been too cumbersome to change and not DRY enough. Using linear gradients would have been much easier.

Horizontal stripes

Simple linear gradient implementation:

background: liner-gradient(#fb3, #58a);
Copy the code

Bring the two color codes closer:

background: liner-gradient(#fb3 20%, #58a 80%);
Copy the code

As you can see, the top 20% and the bottom 20% are solid colors. If you get closer and closer, you can see that the gradient in the middle gets narrower and narrower until the two colors are equal to 50%, so they overlap, and you can’t see the gradient in the middle.

If multiple color codes have the same location, an infinitesimal transition zone is created with the first and last specified values as the starting and ending colors. The effect is that the color changes suddenly at that point, rather than a smooth gradient.

— CSS Images (3rd edition)

A gradient is a code generated image, so it can be used like a background image:

background: liner-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
Copy the code

Stripes of unequal width can be implemented in the same way:

background: liner-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
Copy the code

If the position value of a color label is smaller than the position value of the color label before it in the entire list, the color label position value is set to the maximum value of all color label positions before it.

— CSS Images (3rd edition)

From the specification, we can see that we only need to set the latter value to 0 and it will be smaller than the previous value, which can be automatically adjusted by the browser to the front value.

If you want to implement stripes of more than two colors, you can do the same:

Background: Liner-gradient (# fB3 33.3%, # 58A 0, # 58A 66.6%, YellowGreen 0); background-size: 100% 45px;Copy the code

Vertical stripes

Horizontal stripes are the default direction (to bottom is the default gradient). We can also change the gradient direction to achieve vertical stripes:

background: liner-gradient(to right, #fb3 50%, #58a 0); /* Use 90deg */ background-size: 30px;Copy the code

Remember to change background-size as well.

The diagonal stripes

If you change the gradient direction and background-size, you can also get oblique stripes:

background: liner-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
Copy the code

We can also see that the actual effect does not work because it only changes the direction of the gradient within each patch, rather than changing the direction of the entire background. You can use background-repeat: no-repeat to see the effect.

Therefore, we need four stripes in each patch to achieve seamless stitching of each patch, and two stripes cannot achieve this effect at all:

background: liner-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
Copy the code

This will make an oblique stripe, but it will look thinner than the horizontal and vertical ones, and it will take the Pythagorean theorem to get the desired width. The current width is 15/√2px, which is about 10.6, and we want 15. The hypotenuse of the patch is 60 (4 widths * 15), so it is 60/√2, which is approximately 42.4. Let’s round it up to 42px, because √2 is not an integer, so it will be an approximation.

Better diagonal stripes

The previously implemented diagonal stripe is inflexible, requiring us to calculate the edge length of the patch every time, not even 45°, but 60° or 30 °, which makes the result difficult to control.

There is a better way to do this, liner-gradient() and resort-gradient (), as well as a round-robin version: repeating-liner-gradient() and repeating-radial (). The only difference is that the color code repeats indefinitely until it fills the background.

background: repeating-liner-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
Copy the code

This way we can get the same effect without the length calculation, and with less code and fewer changes. And that’s not the biggest benefit, the biggest benefit is the Angle change, we can change the Angle arbitrarily, like 60° diagonal stripe:

background: repeating-liner-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
Copy the code

As simple as changing the Angle. When dealing with 45° fringes, this method can also be combined with the previous method:

background: repeating-liner-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42px 42px;
Copy the code

So we can only change the edge length of the patch.

Flexible same color stripe

In most cases, the stripe pattern that needs to be obtained is of the same color. It is not very different, but there is a slight difference in brightness.

background: repeating-liner-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
Copy the code

As you can see, the stripes are made up of a primary hue (# 58A) and its lighter variant. So before the color changes, we have to change four places.

Instead of using a separate color for each stripe, we can set the main color directly to the background color and overlay translucent white stripes to create light stripes.

background: #58a; background: Repeating-liner-gradient (30DEg, HSLA (0,0%,100%,0.1), HSLA (0,0%,100%,0.1) 15px, transparent 0, transparent 30px);Copy the code

You can see the same effect as shown above, but in the modification, we only need to change the background color in one place.

Zhejiang Dahua Technology Co., Ltd.- Soft Research – Smart City Product R&D Department Recruitment senior front-end ！！！！！ Welcome everyone to chat, you can send your resume to [email protected], join us, we can progress together, dinner together, travel together, let us from the world village partners into dahua village partners.