Html 特定圆形导航

如何正确制作这样的导航栏，尤其是这两条相交的线。我知道我可以使用

变换：skewX（10度）用于旋转此垂直线，但不确定我是否可以使用整个html和css


HTML:

<main>
   <div class="rounded-rectangle">
      <ul class="top">
         <li>
            <button>text</button>
         </li>
         <li>
            <button>text</button>
         </li>
      </ul>
      <ul class="bottom">
         <li>
            <button>text</button>
         </li>
         <li>
            <button>text</button>
         </li>
      </ul>
   </div>
</main>




文本


文本




文本


文本



您可以使用容器的伪元素来绘制相交线


html，
身体{
身高：100%；
}
身体{
显示器：flex；
弯曲方向：行；
字体系列：“Raleway”，无衬线；
背景色：#e24d3d；
}
主要{
柔性生长：1；
}
ulli{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
列表样式：无；
文本转换：大写；
字体大小：30px；
}
钮扣{
背景色：透明；
边界：无；
颜色：白色；
填充：32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字号：2.5em；
字体系列：“Raleway”，无衬线；
文本转换：大写；
}
按钮：焦点{
轮廓：-webkit聚焦环颜色自动0px；
}
ul顶部{
显示器：flex；
证明内容：周围的空间；
身高：50%；
}
ul.上分区：第n个最后一个孩子（1）{
右边框：1px实心#FFF；
}
ul.bottom{
显示器：flex；
证明内容：周围的空间；
身高：50%；
}
.圆角矩形{
背景色：rgba（128213226,0.4）；
高度：320px；
最大宽度：520px；
边界半径：10px；
保证金：自动；
位置：相对位置；
}
.圆角矩形：之前，.圆角矩形：之后{
内容：''；
位置：绝对位置；
背景：#fff；
}
.圆角矩形：在{
最高：50%；
高度：1px；
左：0；右：0；
}
.圆角矩形：在{
左：50%；
宽度：1px；
顶部：0；底部：0；
变换：旋转（10度）；
}
保险商实验室{
填充：0；
保证金：0；
}



文本


文本




文本


文本


谢谢，就这样。我有个小问题。当我降低高度时，例如最小高度：110px，里面的文本不是responsive@cygnus听起来这超出了你的任务范围，不是吗？如果你不能弄清楚，你应该写一篇新文章，但你需要更具体一些。更改
min height
关于什么？你说它没有响应是什么意思？因为它重叠了？听起来你只需要使用@media查询来处理不同的高度和调整字体大小之类的，或者使用
vw
或
vh
单位来控制文本大小。不管怎样，我认为在这篇文章的评论中要解决这个问题有点复杂。只要找出我在
li
中打破了高度，无论如何，再次感谢！