html - 如何在 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>

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

标签： htmlcss

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>