css - 如何创建带圆 Angular 的假标签？

Question

即使我读过 alistapart - slidingdoors ，我卡住了。

这是我想做的:

您可能已经猜到，问题出在中间。下面是我如何将选项卡“剪切”到 div 中(很抱歉，它很难看，但这样解释会更快)(a green square = a div):

即使它不兼容 IE6-7(非常感谢 Microsoft)，以下是它在 Firefox、Chrome 和 Opera 下的功能:

现在我想完成左右边框，并在底部完成圆 Angular (如第一张图片)。你知道我应该怎么做吗(请记住，我正计划将工作交给另一个人，他的任务是使我的工作与 IE 6 和 7 兼容)？我卡住了。

[编辑] 经过数小时的搜索，感谢“Gaby aka G. Petrioli”(非常感谢)的帮助，我几乎完成了我想做的所有事情。

这是我得到的:

这是我想要得到的:

如果你有任何想法......

Answer 1

您可以使用 CSS 和选项卡右侧的单个图像来做到这一点。

看看这个演示 http://jsfiddle.net/uwUwK/3/并将 background-image 添加到红色元素(类为 .tab-separator 的元素)

---

如果您可以使用不同的选项卡右侧(不那么拉长)，您根本不需要图像，演示在 http://jsfiddle.net/uwUwK/4/