如何在 CSS/HTML/JS 上创建虚线

Question

是否可以使用 HTML/CSS/JS 而不是图片创建虚线。 它必须看起来像照片。

PS对不起我的ENG）

Answer 1

 .broken-line { position: relative; height: 10px; border-top: 1px solid #000; }.broken-line:before { position: absolute; left: -1px; top: -1px; content: ''; border-top: 10px solid #000; border-right: 10px solid transparent; }.broken-line:after { position: absolute; left: -2px; top: -2px; content: ''; border-top: 10px solid white; border-right: 10px solid transparent; }

 <div class="broken-line"></div>

Answer 2

您可以使用 SVG 很容易地制作这样的东西。

 <svg viewBox="0 0 500 80" width="500" height="80" stroke="blue"> <text x="75" y="22" fontsize="20" stroke="black">I'm text and I'm on a line lalalalala</text> <line x1="0" x2="50" y1="80" y2="30" /> <line x1="50" x2="500" y1="30" y2="30" /> </svg>

Answer 3

尝试以下

.broken-line {
 border-top: 5px solid red;
 border-radius: 25px;
}

您可以将边框半径更改为您想要使其更清晰的任何值。

Answer 4

.broken-line {
  width: 180px; /* The width/length of the normal line */
  height: 10px; /* The "height" of the broken part */
  border-top: 2px solid #19c4b0; /* The normal line */
  border-left: 2px solid #19c4b0; /* The broken line */

  transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

<div class="broken-line"></div>

如果需要，您还可以轻松添加边框半径...示例：

...
border-radius: 10px;
...

Answer 5

是的，有多种方法可以使用 html/css/svg/js 来完成它。 这是一个帮助您入门的技术示例。

 body { padding: 5rem 2rem; }.container { position: relative; }.line-tooltip { display: inline-block; position: absolute; left: 1.75rem; border-bottom: dodgerblue 2px solid; transform: translateY(-2rem); opacity: 0; transition: opacity.25s ease; }.line-tooltip:before { content: ""; display: block; position: absolute; bottom: -1.1rem; left: -.5rem; height: 1.25rem; width: 2px; background-color: dodgerblue; transform: rotate(45deg); } #line-test { color: dodgerblue; } #line-test:hover +.line-tooltip { opacity: 1; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/> <div class="container"> <i id="line-test" class="fas fa-info-circle"></i> &lt;- Hover the icon... <aside class="line-tooltip">Hey I'm some text that makes a nifty tooltip. Yay!</aside> </div>