如何创建带有圆角的假标签？
尽管我读过 alistapart - sliderdoors，但我还是被困住了。
这是我想要做的：
你可能已经猜到了，问题就在中间。 以下是我如何将选项卡“剪切”成 div（很抱歉，它很丑，但这样解释起来更快）（a green square = a div）：
尽管它不兼容 IE6-7（非常感谢 Microsoft），但它在 Firefox、Chrome 和 Opera 下提供的内容如下：
现在我想完成左右边框，并以圆形完成底部的角（如第一张图片）。您知道我应该怎么做吗（请记住，我计划将这项工作交给另一个人，其任务是使我的工作与 IE 6 和 7 兼容）？我被困住了。
[编辑] 经过几个小时的搜索，并感谢“Gaby aka G. Petrioli”的帮助（非常感谢），我已经成功地实现了几乎我想要的一切。
这是我得到的：
这是我想要得到的： 
如果您有任何想法...
Even though I've read alistapart - slidingdoors, I'm stuck.
Here's what I want to do:
The problem, you may have guessed, is in the middle.
Here's how I've "cut" into divs the tab (I'm sorry it's ugly but it's faster to explain this way) (a green square = a div):
Even though it's not IE6-7 compatible (many thanks Microsoft), here's what it gives under Firefox, Chrome and Opera:
Now I want to finish the borders left, and right, and finish with round corners on the bottom (like the first picture). Have you any idea how I should do (and keep in mind that I'm planning to give the work to another person whose task will be to make my work compatible with IE 6 and 7)? I'm stuck.
[EDIT] After hours of searching, and thanks to the help of "Gaby aka G. Petrioli" (many many thanks), I've managed to do almost all want I wanted.
Here's what I get:
And here's what I'd like to get:
If you have any idea...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以使用 css 和选项卡右侧的单个图像来做到这一点。
看看这个演示 http://jsfiddle.net/uwUwK/3/ 并添加 < （
如果您可以使用选项卡的不同右侧 少拉长），您根本不需要图像，演示位于 http://jsfiddle.net/ uwUwK/4/
You can do that with css and a single image for the right side of the tab.
Have a look at this demo http://jsfiddle.net/uwUwK/3/ and add a
background-imageto the red element (the one with class.tab-separator)If you could do with a different right side of the tab (less elongated), you do not need an image at all, demo at http://jsfiddle.net/uwUwK/4/
如果它应该兼容 IE 6 和 7，唯一的方法就是使用图像。
要么作为一个大背景图像（仅当高度和宽度是动态的时才有效），要么为每个边框和角使用一组图像（带有背景图像的 div 并重复边框）。
也可以工作（我通过简短的谷歌搜索找到了它）是 http://css3pie.com/
但根据他们使用的方法，它可能会严重影响 ie 的性能。
顺便提一句。如果你使用纯 css3，你有 border-radius 甚至 border-image 来做这些事情。
( http://www.css3.info/preview/border-image/ )
if it should be compatibel to IE 6 and 7 the only way would be to use images.
Either as one big background image (which only works, if the height and width is noct dynamic) or use a set of images (divs with background-image and repeat for borders) for each border and corner.
which could work too (i found it with a short google search) is http://css3pie.com/
But depending on the methods they use, it coul affect the performance on ie heavily.
btw. if you use pure css3, you have border-radius and even border-image to do such things.
( http://www.css3.info/preview/border-image/ )