How to implement controllable dotted line with CSS

Preface

Using css to generate dotted lines is a piece of cake for front-end developers. Generally, border is used to achieve this, and no in-depth study is done, but how to generate the following dotted line? How to do it?

Implementation

In terms of implementation, some people use multiple spans to generate a small dot, which is a span. This is possible, but the entire state change is rather troublesome. Is there any way to generate a controllable dotted line?

Generate dashed

Generate horizontal lines

Generate dashed lines, usually through linear-gradient + background-size, the implementation code is as follows:

height: 2px;
background: linear-gradient(to right, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 15px 100%;

height, controls the height of the dashed line, linear-gradient and background-size control the spacing and step size

Generate vertical lines

The vertical and horizontal lines are just the opposite, just reverse them.

width: 2px;
background: linear-gradient(to bottom, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 100% 15px;

extend

Now that we have both horizontal and vertical lines, does that mean we have plus and minus signs?

CSS generates plus and minus buttons

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;    
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}
<a href="javascript:" class="btn btn-plus" role="button" title="Increase"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="Reduce"></a>

Generate dotted

The above is a generated line, which has no rounded corners. How to generate small dots?

As shown below

Similarly, radial-gradient gradient can be used to generate

The code is as follows:

height: 29px;
background: radial-gradient(#000000, #000000 4px, transparent 4px, transparent);
background-size: 29px 100%;

Note: Here, the width and height of the dot are obtained by radial-gradient. If the height becomes smaller, the dot will be flattened and become an ellipse, as shown below

Extensions

CSS3 gradient can achieve many other effects, such as the triangle of a hollow dialog box.

as follows:

The code is as follows:

width: 6px; height: 6px;
background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
background-size: 6px 1px, 1px 6px, 6px 6px;
transform: rotate(-45deg);

This kind of hollow triangle is very good to achieve with gradient. For solid triangle, border is definitely the first choice. Hollow triangle can also use birder2 edge and achieve it by rotation, but it has certain limitations.

Summarize

The above is the method of using CSS to achieve controllable dotted lines that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!