background

One of the problems I encountered recently on a low-code project was that it was difficult for users to determine the appropriate size when drawing a page, so I wanted to see if I could add a ruler to show it. Draw a triangle, circle has not known how many times to write, but the ruler is the first time to draw.

linear-gardient

• Let’s start with a container

    <div class="rule"></div>
Copy the code

• Linear – gardient painting line

        .rule {
            margin: 200px 200px;
            width: 400px;
            height: 80px;
            border: 1px solid blue;
            background:repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 20px); // Linear gradient90Degree of transparent3px, transparent 20pxIt is3px - 20pxtransparentbackground-repeat: repeat-x; // The background repeats along the horizontalbackground-size: 20px 40px; // Set the background height to40px
        }
Copy the code

The effect

• Same thing with the short line and I’m going to add a background and I’m going to make the background a little bit smaller

      .rule {
            margin: 200px 200px;
            width: 400px;
            height: 80px;
            border: 1px solid blue;
            background:repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 20px),repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 10px);
            background-repeat: repeat-x;
            background-size: 20px 40px.20px 20px;
        }
Copy the code

• Add a number at the end, there are many ways to implement text, but this is just a demonstration

    <div class="rule">
        <span>01</span>
    </div>
    
         .rule {
            margin: 200px 200px;
            width: 400px;
            height: 80px;
            border: 1px solid blue;
            background:repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 20px),repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 10px);
            background-repeat: repeat-x;
            background-size: 20px 40px, 20px 20px;
          
            font-size: 20px;
            letter-spacing: 5px; 
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
Copy the code

The effect

The last

This is just a quick demo. Thank you.