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.
2 Answers
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 class="line"></div>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 class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></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 class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>Related