CSS边界半径方向

Question

我有要求制作这些菜单项：

顶级菜单：

侧面菜单：

我从border-radius开始，但我不知道如何让对方成为'外半径'，我相信顶部和底部的菜单主要是相同的想法，我只会必须玩大小和方向。

我很快会分享一个我正在研究的版本的jsFiddle，目前我还没有做任何事情。

Answer 1

基本上你想使用:before和:after选择器在你想要的角落里创建一个边框半径小的框。

网上有很多例子，这里有几个例子：

• Making Outer Border Radius Using CSS and CSS3
• CSS3 - Tabs with inner and outer radii - no graphics - （免费供个人使用 - 不是商业用途）
• Flared Borders with CSS