HTML・CSS Writing 2022

How to set diagonal stripes as background color

This is a method to set the diagonal stripe as the background color. You can set the diagonal stripes as the background color by creating a large diagonal gradient that repeats twice and setting the background size to a small value.

CSS to set diagonal stripes as background color

CSS that sets diagonal stripes as the background color. The stripe width is 1px.

background: repeating-linear-gradient (-45deg, #fff 0%, #fff 25%, #DBEDFF 25%, #DBEDFF 50%);
background-size: 4px 4px;

How to change the stripe color?

#fff is white at intervals. Let's change the two "#DBEDFF" after that.

background: repeating-linear-gradient (-45deg, #fff 0%, #fff 25%, red 25%, red 50%);
background-size: 4px 4px;

How to change the stripe width

It can be adjusted by using background-size.

background: repeating-linear-gradient (-45deg, #fff 0%, #fff 25%, #DBEDFF 25%, #DBEDFF 50%);
background-size: 8px 8px;

background: repeating-linear-gradient (-45deg, #fff 0%, #fff 25%, #DBEDFF 25%, #DBEDFF 50%);
background-size: 16px 16px;

What happens if I don't specify the background size?

It will be like this.

background: repeating-linear-gradient (-45deg, #fff 0%, #fff 25%, #DBEDFF 25%, #DBEDFF 50%);

If you specify 4px, the stripe width will be 1px because you are trying to put such a background in a 4px square.