How to implement controllable dotted line with CSS

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!

<<:  B2C website user experience detail design reference

>>:  Use of Vue3 table component

Recommend

Example of building a Jenkins service with Docker

Pull the image root@EricZhou-MateBookProX: docker...

The correct way to use Homebrew in Linux

Many people use Linux Homebrew. Here are three ti...

A brief discussion on VUE uni-app template syntax

1.v-bind (abbreviation:) To use data variables de...

Vue+Vant implements the top search bar

This article example shares the specific code of ...

IDEA2021 tomcat10 servlet newer version pitfalls

Because the version I used when I was learning wa...

How to install MySQL 5.7.28 binary mode under CentOS 7.4

Linux system version: CentOS7.4 MySQL version: 5....

Implementation of the login page of Vue actual combat record

Table of contents 1. Preliminary preparation 1.1 ...

How to implement Mysql scheduled tasks under Linux

Assumption: The stored procedure is executed ever...

Example of creating circular scrolling progress bar animation using CSS3

theme Today I will teach you how to create a circ...

JS implements array filtering from simple to multi-condition filtering

Table of contents Single condition single data fi...

How to use Typescript to encapsulate local storage

Table of contents Preface Local storage usage sce...

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...