如何使用html和css绘制虚线答案

【问题标题】：How to draw dashed line using html and css如何使用html和css绘制虚线
【发布时间】：2021-08-30 00:54:00
【问题描述】：

如何使用 html 和 css 绘制虚线，如下所示。不是虚线。

"---------------------------------------------- ----"

可以使用这个边框：1px 虚线。但是需要增加破折号的长度大小，而不是宽度

【问题讨论】：

标签： html css

【解决方案1】：

使用repeating-linear-gradient，您可以随意控制大小和间距：

.line {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(to right,red 0,red 5px,transparent 5px,transparent 7px)
    /*5px red then 2px transparent -> repeat this!*/
}

.line1 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(to right,red 0,red 3px,transparent 3px,transparent 7px)
    /*3px red then 4px transparent -> repeat this!*/
}

.line2 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(to right,red 0,red 10px,transparent 10px,transparent 12px)
    /*10px red then 2px transparent -> repeat this!*/
}

<div class="line"></div>
<div class="line1"></div>
<div class="line2"></div>

您也可以使用多个背景将它们全部放在同一个元素中：

.line {
  margin:5px 0;
  height:20px;
  background:
    repeating-linear-gradient(to right,red 0,red 5px,transparent 5px,transparent 7px) top,
    repeating-linear-gradient(to right,red 0,red 3px,transparent 3px,transparent 7px) center,
    repeating-linear-gradient(to right,red 0,red 10px,transparent 10px,transparent 12px) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}

&lt;div class="line"&gt;&lt;/div&gt;

【讨论】：

这个画线是这样的_ _ _ _ _ _ _ _ _ _ >。我想在此之后附加箭头，如下所示.. ------------------------------------------------>。但是使用上面无法创建的行。
@SSSS 调整背景位置...正如您在最后一段代码中看到的那样，高度为 20px，中间有渐变...所以调整您想要的高度并放置中间渐变
这是使用的箭头。 fa ui-icon-keyboard-arrow-right