Css 外部边界半径如下图所示。。？

我使用的是ant-d导航栏，我必须制作一个像图中所示的外部边界。我怎样才能做到这一点？

---

您可以为每个菜单项设置一个顶部和底部的

div

以配合每个菜单项，然后将其设置为您的边框半径。看看我为你做的这个例子：

var header=document.getElementById（“cont”）；
var btns=header.getElementsByClassName（“containerblue”）；
对于（变量i=0；i

.container{
背景色：天蓝色；
宽度：300px；
}
.集装箱蓝色{
背景颜色：蓝色；
宽度：20px；
左侧填充：25px；
}
.containerblue.active>.top{
背景颜色：蓝色；
宽度：200px；
高度：25px；
边界半径：0px 0px 25px 0px；
指针事件：无；
}
.containerblue.active>.middle{
背景色：天蓝色；
宽度：200px；
边界半径：25px；
填充：20px；
}
.containerblue.active>.bottom{
背景颜色：蓝色；
宽度：200px；
高度：25px；
边界半径：0px 25px 0px 0px；
指针事件：无；
}
.顶{
背景颜色：蓝色；
宽度：200px；
高度：25px；
指针事件：无；
}
.中{
背景颜色：蓝色；
宽度：200px；
填充顶部：20px；
垫底：20px；
光标：指针；
颜色：白色；
}
.底部{
背景颜色：蓝色；
宽度：200px；
高度：25px；
指针事件：无；
}

搜寻
合同
等

非常感谢您的回答。我理解您的解决方案，但现在的问题是如何附加top和bottom div？我正在使用reactJS。我是react的新手，所以我对如何在导航中添加div感到困惑。@Arslanali我已经编辑了我的答案。我继续为你做了一份功能齐全的菜单。看一看。再次非常感谢你。。。。。