Example IMG It is necessary to create a discontinuous line consisting of circles with a diameter of 4px. And the distance between the circles should be 8px. I can't get the desired result in CSS, please help.
CodePudding user response:
radial-gradient can do it:
.line {
height: 6px; /* diametre */
background:
radial-gradient(circle closest-side, blue 90%, #0000)
0/14px 100%; /* 14px = 6px 8px */
}
<div ></div>
CodePudding user response:
we can use this CSS solution:
border-top: 4px dotted red;
advantages:
- with only one div
- and no complex code
- no repetition
#line {
border-top: 4px dotted red;
}
<div id="line"></div>
CodePudding user response:
One approach could be like:
CSS like this:
.dot {
height: 8px;
width: 8px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
margin: 4px
}
And the HTML body would be like:
<body>
<div #dots style="text-align:center">
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</body>
Result:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dot {
height: 8px;
width: 8px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div #dots style="text-align:center">
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</body>
</html>