如何在 CSS 中制作虚线箭头？

Question

我目前正在尝试在 CSS 中制作步进器。到目前为止，我做了其他所有事情，但现在我需要以某种方式制作一条虚线，箭头指向底部的右侧，例如顶线：

这是我的 HTML 布局：

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

我首先想到使用border: 1px dotted; 但这看起来很糟糕，反而给了我尖锐的边缘或圆点。 第二个问题是，当我缩小浏览器时，上/下边框需要调整大小。

如您所见，水平边框有时在顶部，有时在底部。 为此，我想我可以切换 div 中的顺序：

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

以前有人做过这个并且知道一种聪明的方法而不是创建代表一个点的多个子元素吗？

Answer 1

单元素解决方案：

 .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

您可以使用 CSS border-image 属性来自定义点

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

如果您的需求像上图一样复杂，您可以查看SVG.js等库

Answer 3

我知道使用纯 CSS 的那种作品的唯一方法是用背景图像和渐变伪造虚线边框。 像这样，每一行和每个箭头都需要一个元素。 可以使用 Flexbox 进行定位。这有点 hack，我个人更喜欢 SVG.js 已经提供的解决方案，但它可能是一个可能的解决方案。

编辑：忘记提及：点、箭头等的大小都可以通过更改箭头尖端的边框大小以及线条中的渐变 % 和背景大小来调整。 当您更改浏览器窗口的宽度/高度时，箭头会调整大小。 您可以在代码段的整页预览中对其进行测试。

 .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>