Html 在菜单中间切角

我试图在菜单的中间切角，但我找不到如何在CSS中这样做

以下是我想要的：

没有找到一个好办法。 尝试使用一些伪元素和左下和右下半径

我想我可以用底部的东西来做徽标，但我很确定这是可能的，但我找不到方法

以下是我构建它的方式：

*{
框大小：边框框；
}
ul，
李{
列表样式：无；
线高：1；
显示：内联块；
}
.标题{
线高：1；
填充顶部：15px；
背景色：#FFF；
}
.header>div{
显示：网格；
栅柱间隙：90px；
对齐项目：居中；
网格模板列：1fr auto 1fr；
网格模板区域：“左-中-右”；
}
.标题ul.菜单>li:非（：第一个子项）{
左边距：35px；
}
李局长{
显示：内联块；
}
.页眉左{
网格区域：左侧；
自我辩护：正确；
}
.收割台中心{
网格区域：中心；
}
.header_u_右{
网格区域：右；
}

菜单1
菜单2

标志

菜单1
菜单2

我不确定您尝试使用伪元素时出了什么问题，但这似乎有效。您可能需要稍微调整一下边距、填充和位置

*{
框大小：边框框；
}
身体{
最小高度：100vh；
保证金：0；
填充：0；
背景图片：url(https://picsum.photos/1600);
背景尺寸：封面；
背景颜色：粉红色；
}
ul，
李{
列表样式：无；
线高：1；
显示：内联块；
}
.标题{
线高：1；
填充：0 0 5px；
边缘顶部：15px；
位置：相对位置；
溢出：隐藏；
}
.标题.容器{
背景色：#fff；
位置：相对位置；
填充顶部：10px；
边缘底部：20px；
}
.header：：之前{
内容：''；
位置：绝对位置；
宽度：120px；
高度：120px；
边界半径：60px；
左：50%；
转化：translateX（-50%）；
顶部：-35px；
背景：#fff；
溢出：隐藏；
}
.header>div{
显示：网格；
栅柱间隙：90px；
对齐项目：居中；
网格模板列：1fr auto 1fr；
网格模板区域：“左-中-右”；
}
.标题ul.菜单>li:非（：第一个子项）{
左边距：35px；
}
李局长{
显示：内联块；
}
.页眉左{
网格区域：左侧；
自我辩护：正确；
}
.收割台中心{
网格区域：中心；
}
.header_u_右{
网格区域：右；
}

菜单1
菜单2


菜单1
菜单2