弯曲的底角朝外，就像在 Office 功能区选项卡中一样，使用 CSS
在工作中，我的任务是创建一个类似于功能区 UI 的简单菜单 UI。它不一定要那么复杂或漂亮，但它需要有一个我不知道该怎么做的特定外观。
我需要将所选选项卡的底部设为圆形，但朝外，就像在 Office 中一样。使用CSS3（border-top-left-radius：4px，右侧相同）可以很容易地将选定选项卡的顶部变成圆形，所有现代浏览器都支持这一点（我们不需要旧浏览器上的圆角。它们如果他们愿意，可以轻松升级:))。但是，如果我在选定的选项卡上使用 border-bottom-left-radius:4px ，它具有正常的圆底角，朝内，而不是朝外（抱歉我的英语不好）。
使用 CSS3 可以以某种方式实现吗？
At work i am given a task to create a simple menu UI that resembels the Ribbon UI. It doesn't have to be that sophisticated or nice looking, but it needs to have a specific look that I don't know how to do.
I need to make the bottom of a selected tab round, but facing outwards, just like in Office. It was easy to make the top of a selected tab round using CSS3 (border-top-left-radius:4px and same for right), which is supported in all modern browsers (we don't need round corners on old browsers. They can easily upgrade if they want to :) ). But if I use border-bottom-left-radius:4px on a selected tab, it has the normal round bottom corner, facing inwards, not outwards (sorry for my bad english).
Can it be achieved somehow using CSS3?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我理解正确，这就是您想要的： http://jsfiddle.net/U84ng/
这是有点伪造，当你的背景是图像而不是纯色时，会变得更加复杂。但除非它是水平变化的图像（即不是渐变或图案）并且选项卡的宽度不灵活（取决于文本宽度，而不是 css 中固定的宽度），否则可以完成。
If I understand correctly, than this is what you want: http://jsfiddle.net/U84ng/
This is faking a little, and gets more complex when your background is an image instead of solid color. But unless it's an image that changes horizontally (ie. not a gradient or pattern) and your tabs aren't flexible in width (depending on text width, rather than one fixed in css) it can be done.