html - 带标签的css3多步骤表单

Question

我在尝试构建带有选项卡的多步骤表单时遇到了很多麻烦。这是设计，因此您可以了解我要做什么:

image

让我很难受的是每个选项卡末尾的箭头之类的东西；我试图使用 css 边框来绘制三 Angular 形，但找不到使它看起来与设计相似的方法。我真的需要使用背景图像来做到这一点吗？非常感谢任何帮助。

<ul>
<li>
<span>text</span>
<span>number</span>
</li>
<li>
<span>text</span>
<span>number</span>
</li>
<li>
<span>text</span>
<span>number</span>
</li>
</ul>

Answer 1

您只需在 2 个嵌套的 div 上使用您正在谈论的边框技术。外层 div 是三 Angular 形边框的颜色(蓝色)，内层是灰色。只需将灰色的变小一点并正确放置它，就可以了。

这就是 Twitter 在之前的设计迭代中的做法，当时他们在推文回复上方有一个箭头。