如何在Tailwind CSS中为选中头部菜单实现负border-radius效果

首先明确：CSS原生不支持负的border-radius值，Tailwind CSS作为CSS工具类框架自然也无法直接设置负圆角。不过可以通过伪元素或额外小元素模拟出你需要的底部凹进效果，适配选中态菜单的需求。

调整后代码方案 #

基于你现有的代码，修改如下（核心是用两个小元素覆盖菜单底部边框角落，模拟凹进效果）：

<div class="w-full h-[60px] relative 
flex flex-row items-center justify-center 
pt-[17px] pb-[17px] px-[28px] 
box-border gap-2.5 text-left text-[18px] 
leading-[30px] font-semibold bg-white text-[#0A98E7] 
rounded-t-[10px] 
-mb-[5px] z-10 border-t border-l border-r border-white 
whitespace-nowrap">
  菜单选项
  <!-- 模拟底部凹进的左右半圆 -->
  <div class="absolute -bottom-[5px] left-0 w-[10px] h-[5px] bg-white rounded-b-[10px]"></div>
  <div class="absolute -bottom-[5px] right-0 w-[10px] h-[5px] bg-white rounded-b-[10px]"></div>
</div>

关键调整说明 #

• 移除原代码中的rounded-b-[10px]，不需要底部外圆角
• 添加两个绝对定位的小元素：
  • -bottom-[5px] 与你的-mb-[5px]对应，刚好贴合下方区域
  • w-[10px] h-[5px] 配合rounded-b-[10px]形成半圆形状，背景色设为菜单同色bg-white，覆盖边框角落后就会呈现凹进的视觉效果

无额外DOM的简化方案 #

如果不想新增DOM元素，可直接用Tailwind伪元素工具类实现：

<div class="w-full h-[60px] relative 
flex flex-row items-center justify-center 
pt-[17px] pb-[17px] px-[28px] 
box-border gap-2.5 text-left text-[18px] 
leading-[30px] font-semibold bg-white text-[#0A98E7] 
rounded-t-[10px] 
-mb-[5px] z-10 border-t border-l border-r border-white 
whitespace-nowrap after:content-[''] after:absolute after:-bottom-[5px] after:left-0 after:w-[10px] after:h-[5px] after:bg-white after:rounded-b-[10px] before:content-[''] before:absolute before:-bottom-[5px] before:right-0 before:w-[10px] before:h-[5px] before:bg-white before:rounded-b-[10px]">
  菜单选项
</div>

内容的提问来源于stack exchange，提问作者Joshua Johan