带标签的 css3 多步骤表单

Question

我在尝试使用标签构建这个多步骤表单时遇到了很多麻烦。这是设计，因此您可以了解我要做什么：

image

让我非常难过的是每个标签末尾的箭头。我试图使用 css 边框来绘制三角形，但找不到让它看起来与设计相似的方法。我真的需要使用背景图片来做到这一点吗？任何帮助将不胜感激。

<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 将是三角形边框的颜色（蓝色），内部 div 将是灰色。只需将灰色调小一点并正确放置即可。

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