css - flex 的底 Angular 朝外，就像在 Office 功能区选项卡中一样，使用 CSS

Question

在工作中，我接到了一项任务，要创建一个类似于功能区 UI 的简单菜单 UI。它不一定要那么精致或漂亮，但它需要有一种我不知道该怎么做的特定外观。

我需要将所选选项卡的底部做成圆形，但面朝外，就像在 Office 中一样。使用 CSS3(border-top-left-radius:4px 和右侧相同)很容易使选定选项卡的顶部变圆，所有现代浏览器都支持它(我们不需要旧浏览器上的圆 Angular 。他们如果他们愿意，可以轻松升级 :))。但是如果我在选定的选项卡上使用 border-bottom-left-radius:4px ，它有正常的圆底 Angular ，面向内，而不是向外(抱歉我的英语不好)。

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

Answer 1

如果我没理解错的话，这就是你想要的:http://jsfiddle.net/U84ng/

这有点假，当您的背景是图像而不是纯色时会变得更加复杂。但除非它是一个水平变化的图像(即不是渐变或图案)并且您的选项卡宽度不灵活(取决于文本宽度，而不是固定在 css 中)，否则可以完成。