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