如何创建带圆角的假标签？

Question

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

这就是我想要做的事情：

你可能已经猜到，问题在于中间。 这是我如何“切入”div的标签（我很抱歉这很难看，但这样解释得更快）（绿色方块= div ）：

即使它不兼容IE6-7（非常感谢微软），这是它在Firefox，Chrome和Opera下提供的内容：

现在我想完成左边和右边的边框，并在底部完成圆角（就像第一张图片一样）。您是否知道我应该怎么做（请记住，我打算将工作交给另一个人，他的任务是使我的工作与IE 6和7兼容）？我被卡住了。

[编辑]经过几个小时的搜索，并感谢“Gaby aka G. Petrioli”的帮助（非常感谢），我已经设法几乎所有我想要的。< / p>

这是我得到的：

这就是我想得到的：

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

Answer 1

您可以使用css和标签右侧的单个图像。

查看此演示http://jsfiddle.net/uwUwK/3/并向红色元素添加background-image（类.tab-separator 的）

---

如果您可以使用标签的不同右侧（拉长），则根本不需要图像，http://jsfiddle.net/uwUwK/4/上的演示

Answer 2

如果它应该与IE 6和7兼容，唯一的方法是使用图像。 作为一个大的背景图像（只有高度和宽度是动态的）才能使用，或者为每个边框和角点使用一组图像（带有背景图像的div和重复边框）。

也可以正常工作（我用短搜索找到它）是http://css3pie.com/ 但是，根据他们使用的方法，它会影响性能，即严重影响。

顺便说一句。如果你使用纯css3，你有border-radius甚至border-image来做这些事情。 （http://www.css3.info/preview/border-image/）