弯曲的底角朝外，就像Office Ribbon标签一样，使用CSS

Question

在工作中，我被赋予了一项任务，即创建一个简单的菜单UI，用于分类功能区UI。它不一定要那么复杂或漂亮，但它需要具有我不知道该怎么做的特定外观。

我需要将所选标签的底部设置为圆形，但面朝外，就像在Office中一样。使用CSS3（border-top-left-radius：4px和右侧相同）很容易使所选标签的顶部变圆，这在所有现代浏览器中都受支持（我们不需要旧浏览器上的圆角。可以轻松升级，如果他们想:)）。但是如果我在选定的标签上使用border-bottom-left-radius：4px，它有正常的圆底角，面向内，而不是向外（抱歉我的英文不好）。

可以用CSS3以某种方式实现吗？

Answer 1

如果我理解正确，那就是你想要的：http://jsfiddle.net/U84ng/

这有点伪装，当你的背景是图像而不是纯色时会变得更复杂。但除非是水平变化的图像（即不是渐变或图案），并且标签的宽度不灵活（取决于文本宽度，而不是css中固定的标签），否则可以完成。

Answer 2

观看本教程我解释了所有内容并适用于任何背景图片 - http://www.youtube.com/watch?v=woVzE-b9qRM。