如何使用html和css如下绘制带有箭头的虚线

Question

如何使用html和css如下绘制虚线？不是虚线。 ------>箭头应位于虚线的中心。

请参阅所附的。

我已经尝试过了：

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

<div class="line"></div> <i class="fa ui-icon-keyboard-arrow-right ui-icon-button;" style="font-size:24px; color:black"></i>

Answer 1

请参考以下代码并根据您的要求更改样式。

.myarrow{
  position:absolute;
  top:0;
  bottom:0;
  transform: rotate(90deg);
}
.line {
  border-right: 0.2rem dashed red;
  display:inline-block;
  height:5rem;
}
.arrow{
position:absolute;
  top:-0.3rem;
  bottom:0;
  height:1rem;
  border-right: 0.2rem solid red;
  display: inline-block;
}
.right{
  left:0.3rem;
  transform: rotate(-45deg);
}
.left{
  right:0.3rem;
  transform: rotate(45deg);
}

<div class="myarrow">
  <span class="arrow left"></span>
  <span class="line"></span>
  <span class="arrow right"></span>
</div>