Such things as scale are repeating. When it comes to repeating, I think of repeating-linear-gradient. Looking at the name, we can see that repeating linear gradient is repeating linear gradient. It can more easily realize the function of interlacing discoloration. If you want to draw a background, it is repeating and interlacing, then it is right to use it.

Design sketch

principle

The ruler scale can be divided into three kinds of centimeter scale, half centimeter scale and millimeter scale. Then draw three repeated linear gradients on an element.

Basic usage

background-image: repeating-linear-gradient(90deg, red 0, red 50px, blue 0, blue 200px);

The results are as follows:

Simple understanding:

red 0, red 100px represents the position of 0 to 100 PX rendered green, blue 0, blue 200px represents the position of 0 to 200 PX rendered red red red, and then repeated, so the red actually see is 150 px;

Separation steps

1. Scale box

First you have to draw a box with a width of 16 cm. The purpose is to draw a ruler of 15 cm. The left and right margins are 1.5 cm:

.ruler {
  width: 16cm;
  height: 3cm;
  border: 1px solid $color-border;
}

The results are as follows:

2. centimeter scale

The width of a scale is 5px, and then a scale is drawn every 1cm (separated by transparent colors):

background-image: repeating-linear-gradient(90deg, $color-main 0, $color-main 5px, transparent 0, transparent 1cm);

The results are as follows:

Set the distance between the two sides of the ruler to be. 5cm and adjust the position of the background.

background-position: .5cm 0;
background-repeat: no-repeat;

The results are as follows:

It was found that there was no alignment on the far right because the width of the last scale was 5px, so we had to add 5px width to the ruler:

width: calc(16cm + 5px);

The results are as follows:

Next, set the height of the scale to 30px:

background-size: 100% 30px;

The results are as follows:

Change the position to the bottom, because the previous position only sets the x-axis, then the y-axis is set to 100%:

background-position: .5cm 100%;

3. Half centimeter scale

The steps are the same as the centimeter scale. Just make some minor adjustments. Set up multiple backgrounds separated by commas. The other attributes are as follows:

background-image: "Centimeter scale background", repeating-linear-gradient(90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5cm);
background-size: "Centimeter scale size", 100% 20px; // Height 20 PX

The results are as follows:

There's an extra scale on the right, so the width of the background can't be 100%. It has to be subtracted (according to the actual situation):

background-size: "Centimeter scale size", calc(100% - 1cm) 20px;

The results are as follows:

It is found that the half-scale is not in the middle of the scale, but there is still a slight deviation. The background position of the half-scale must be changed.

background-position: "Centimeter scale position", (.5cm + 1.5px) 100%;

The results are as follows:

4. Millimeter scale

The steps are also consistent with the above:

background-image: "Centimeter scale background", "Half centimeter scale background", repeating-linear-gradient(90deg, $color-main 0, $color-main 1px, transparent 0, transparent .1cm);
background-size: "Centimeter scale size", "Half centimeter scale size", calc(100% - 1.2cm) 10px; // Height 10 px
background-position: "Centimeter scale position", "Half centimeter scale position", calc(.5cm + 2px) 100%; // Cutting Background

The results are as follows:

5. Numbers

Put 0-15 numbers in the box:

<div class="ruler">
  <span>0-15</span>
</div>

The style can be added as follows:

.ruler {
  display: flex;
  justify-content: space-between;
  
  span {
    flex: 1;
    margin-top: 55px;
    text-align: center;  
  }
}

The results are as follows:

Codpen address: css scale

Wash, cut and blow

Similar cases also have thread progress bar, because it is the same, so only one, Tony wash and cut shop front of the ribbon is also OK Haha:

Codpen address: css washing, shearing and blowing

Last

Haha, I don't know what to say. The scale is useless, but it's interesting, isn't it? If you think this article is good, please don't forget to pay attention to it.

Communication

Wechat Public's "Front End Cosmological Intelligence Agency" will update the latest and practical front-end skills/technical articles from time to time, as well as the occasional interesting stories on the Internet.

Pay attention to the public number, reply to "1" to get two-dimensional code for group chat, learn, communicate and fish together