How can I make a dotted arrow in CSS?

Question

I'm currently trying to make a stepper in CSS. So far I did everything else but now I need to somehow make a dotted line with an arrow pointing to the right in the bottom eg top line:

This is my HTML layout:

<div class="step-connection-line-wrapper">
  <span class="step-connection-line-down"></span>
  <span class="step-connection-line-right"></span>
</div>

I first had the idea to use border: 1px dotted; but this looks awful and gives me sharp edges instead or rounded dots. The second problem is that the top/below border needs to resize when I make the browser smaller.

As you can see the horizontal border is sometimes at the top and sometimes at the bottom. For that I thought I can switch the order in the div:

<div class="step-connection-line-wrapper">
  <span class="step-connection-line-right"></span>
  <span class="step-connection-line-down"></span>
</div>

Had someone done this before and knows a smart way instead of creating multiple child elements representing one dot?

Answer 1

A one element solution:

 .dot { --c:red; /* color */ --r:10px; /* circle size */ --s:10px; /* space bettwen circles */ width:100px; height:100px; display:inline-block; margin:20px; position:relative; --g:radial-gradient(circle closest-side, var(--c) 85%,transparent); background: var(--g) calc(var(--s)/-2) 0/calc(var(--r) + var(--s)) var(--r) repeat-x, var(--g) 0 calc(var(--s)/-2)/var(--r) calc(var(--r) + var(--s)) repeat-y; }.dot::after { content:""; position:absolute; top:calc(var(--r)/2); left:100%; width:20px; height:20px; transform:translateY(-50%); background:var(--c); clip-path:polygon(0 0, 100% 50%,0 100%); }

 <div class="dot"></div> <div class="dot" style="transform:scaleY(-1);--c:green;width:150px;--r:5px;"></div> <div class="dot" style="transform:scaleX(-1);--c:orange;height:50px;--s:15px;"></div> <div class="dot" style="transform:scale(-1);--c:blue;width:80px;--s:5px;"></div>

Answer 2

You could use CSS border-image property for custom dots

#borderimg { 
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

If your requirement is as complex as the image above, you can check out libraries like SVG.js

Answer 3

The only way im aware off that sort of works with purely CSS would be faking the dotted border with background-image and gradient. Like this you require one element for each line and for each arrow-head. The Positioning is possible using Flexbox. It is a bit of a hack and i personally would prefer the Solutions already offered with SVG.js but it might be a possible solution.

Edit: forgot to mention: Sizes of the dots, arrowheads etc. are all adjustible by changing the border-sizes in the arrow tip and the gradient % and the background-size in the lines. The Arrows are resizing when you change the width / height of the Browser-window. You can test that in the full-page preview of the Snippet.

 .arrow { width: 10vw; height: 20vh; display: flex; align-items: center; }.arrow-top { flex-flow: row wrap; }.arrow-top >.arrow-right{ margin-bottom: -1vw; }.arrow-bottom >.arrow-right{ margin-top: -1vw; }.arrow-bottom { flex-flow: row wrap-reverse; }.arrow-right { display: flex; width: 100%; align-items: center; }.arrow-tip { width: 0; height: 0; border-top: 1vw solid transparent; border-bottom: 1vw solid transparent; border-left: 2vw solid green; }.horizontal{ width: 90%; height: 2px; background-image: linear-gradient(to right, black 25%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 8px 8px; background-repeat: repeat-x; }.vertical{ height: 98%; width: 2px; background-image: linear-gradient(black 25%, rgba(255,255,255,0) 0%); background-position: right; background-size: 8px 8px; background-repeat: repeat-y; }.spacer { height: 50px; }

 <div class="arrow arrow-top"> <div class="arrow-right"> <div class="horizontal"> </div> <div class="arrow-tip"> </div> </div> <div class="vertical"> </div> </div> <div class="spacer"> </div> <div class="arrow arrow-bottom"> <div class="arrow-right"> <div class="horizontal"> </div> <div class="arrow-tip"> </div> </div> <div class="vertical"> </div> </div>