带选项卡的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将是三角形边框的颜色（蓝色），内部的颜色将是灰色。只需将灰色的一个小一点并正确定位，就可以了。

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