如何为导航栏制作中间带缺口的倒梯形边框？

需求描述 #

我要制作一个导航栏，包含左右两个独立的链接区域，整体边框为中间带缺口的倒梯形（用于放置Logo）：

• 左侧区域：包含顶部、底部、左侧边框，右侧开放
• 右侧区域：包含顶部、底部、右侧边框，左侧开放

使用React + Tailwind CSS开发，尝试过clip-path但直接裁切了边框，也试过::before/::after伪元素未成功，需要简易解决方案。

当前代码 #

<div className="w-full flex justify-center font-neo hidden sm:flex">
  <div className="w-[70%] flex items-center justify-between relative top-9">
    <ul className="flex items-center gap-8 list-none p-3 pl-4 ">
      <li>
        <Link to="/Acceuil" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">ACCEUIL</Link>
      </li>
      <li>
        <Link to="/Apropos" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">A-PROPOS</Link>
      </li>
      <li>
        <Link to="/Services" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">SERVICES</Link>
      </li>
    </ul>
    <div className="relative -top-3">
      <img src="/pics/logo2.png" className="w-[110px] h-[85px]" />
    </div>

    <ul className="flex items-center gap-8 list-none p-3 pl-4  ">
      <li>
        <Link to="/Nosprojets" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">NOS PROJETS</Link>
      </li>
      <li>
        <Link to="/Gallery" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">GALLERY</Link>
      </li>
      <li>
        <Link to="/Contact" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">CONTACT</Link>
      </li>
    </ul>
  </div>
</div>

解决方案 #

通过自定义clip-path配合Tailwind边框类即可实现，无需复杂伪元素操作，步骤如下：

1. 修改组件代码 #

给左右链接列表分别添加容器，设置clip-path实现斜边缺口，同时调整Logo位置嵌入缺口：

<div className="w-full flex justify-center font-neo hidden sm:flex">
  <div className="w-[70%] flex items-center justify-between relative top-9">
    {/* 左侧链接容器：左、上、下边框 + 右侧斜边缺口 */}
    <div 
      className="border-l border-t border-b border-[#32060699]"
      style={{ clipPath: 'polygon(0 0, 92% 0, 82% 100%, 0 100%)' }}
    >
      <ul className="flex items-center gap-8 list-none p-3 pl-4">
        <li>
          <Link to="/Acceuil" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">ACCEUIL</Link>
        </li>
        <li>
          <Link to="/Apropos" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">A-PROPOS</Link>
        </li>
        <li>
          <Link to="/Services" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">SERVICES</Link>
        </li>
      </ul>
    </div>

    {/* Logo容器：向上偏移嵌入缺口 */}
    <div className="relative -top-10 z-10">
      <img src="/pics/logo2.png" className="w-[110px] h-[85px]" />
    </div>

    {/* 右侧链接容器：右、上、下边框 + 左侧斜边缺口 */}
    <div 
      className="border-r border-t border-b border-[#32060699]"
      style={{ clipPath: 'polygon(18% 0, 100% 0, 100% 100%, 8% 100%)' }}
    >
      <ul className="flex items-center gap-8 list-none p-3 pr-4">
        <li>
          <Link to="/Nosprojets" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">NOS PROJETS</Link>
        </li>
        <li>
          <Link to="/Gallery" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">GALLERY</Link>
        </li>
        <li>
          <Link to="/Contact" className="text-[#32060699] hover:text-red-600 hover:underline text-[10px]">CONTACT</Link>
        </li>
      </ul>
    </div>
  </div>
</div>

2. 可选：用Tailwind自定义类替代内联样式 #

如果不想用内联样式，可以在tailwind.config.js中添加自定义clip-path工具类（需先安装tailwindcss-clip-path插件：npm install tailwindcss-clip-path）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      clipPath: {
        'nav-left': 'polygon(0 0, 92% 0, 82% 100%, 0 100%)',
        'nav-right': 'polygon(18% 0, 100% 0, 100% 100%, 8% 100%)'
      },
    },
  },
  plugins: [require('tailwindcss-clip-path')],
}

之后就可以用clip-path-nav-left和clip-path-nav-right替代内联样式。

关键调整说明 #

• clip-path的多边形坐标可根据需求修改：数值越大，斜边越陡峭，缺口越大
• Logo容器的-top-10可根据导航栏高度、Logo大小调整，确保刚好嵌入缺口
• 边框颜色保持与原代码一致，用border-[#32060699]设置

内容的提问来源于stack exchange，提问作者we aint