如何在CSS中制作虚线箭头?

乔先生

我目前正在尝试在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>

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

普希金

您可以将CSS border-image属性用于自定义点

#borderimg { 
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

如果您的需求与上图一样复杂,则可以签出SVG.js之类的

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章