带条纹的导航栏合并为一个整体

Question

我需要有人帮助我制作导航栏，如下图所示，我也处于这个阶段，如下图所示。我不知道怎样才能让黑色条纹融为一体。将不胜感激任何帮助。

我想要什么：

我有什么：

const Nav = ({title}) => {
        return (
            <button className='p-4 px-6 font-medium text-sm bg-white rounded-full'>
                {title}
            </button>
        )
    }

  return (
    <div className='flex justify-center items-center'>
        <button className='p-4 mr-4 rounded-full bg-white text-gray-500'>
            <VscMenu />
        </button>
        <Nav title='Explore'/>
        <Nav title='Categories'/>
        <Nav title='About'/>
        <button className='ml-4 bg-[--black] text-white font-medium text-sm p-4 px-6 rounded-full'>
            Sign Up
        </button>
    </div>

我正在使用tailwindcss框架

Answer 1

这不是通过 CSS 样式可以实现的，你必须使用 SVG 图像作为背景。这并不完全是你想要的，因为我无法绘制 SVG，只是了解如何实现结果。

最终结果：

反应代码

export default function App() {
  return <>
   <div className="h-screen w-full bg-gray-900" >
  
    <div className="relative">
      <svg
        className="w-72 absolute left-0 top-0 z-0 fill-white"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 287.8671875 48"
        data-meta-row-shape="true"
      >
        <path
          data-meta-row-shape-bridges="true"
          d=" M69.90599636966706 33.52522201753543 C73.20109670876663 28.241704924136332, 79.06452829123337 28.241704924136343, 82.35962863033294 33.525222017535434 L82.35962863033294 14.474777982464568 C79.06452829123337 19.75829507586366, 73.20109670876663 19.758295075863664, 69.90599636966706 14.47477798246457 Z M190.49593305600905 33.89691409636298 C193.55260673965458 29.253337845997297, 199.83412486784584 28.94612942553144, 203.37327505158996 35.45907904073957 L203.37327505158996 12.540920959260431 C199.83412486784584 19.05387057446856, 193.55260673965458 18.746662154002706, 190.49593305600905 14.103085903637025 Z "
        ></path>
        <path
          data-meta-row-rect="0"
          d="M0 24 A18 18 0 0 1 18 6 L54.6328125 6 A18 18 0 0 1 72.6328125 24 L72.6328125 24 A18 18 0 0 1 54.6328125 42 L18 42 A18 18 0 0 1 0 24  Z"
        ></path>
        <path
          data-meta-row-rect="1"
          d="M79.6328125 24 A18 18 0 0 1 97.6328125 6 L175.4609375 6 A18 18 0 0 1 193.4609375 24 L193.4609375 24 A18 18 0 0 1 175.4609375 42 L97.6328125 42 A18 18 0 0 1 79.6328125 24  Z"
        ></path>
        <path
          data-meta-row-rect="2"
          d="M200.4609375 24 A24 24 0 0 1 224.4609375 0 L263.8671875 0 A24 24 0 0 1 287.8671875 24 L287.8671875 24 A24 24 0 0 1 263.8671875 48 L224.4609375 48 A24 24 0 0 1 200.4609375 24  Z"
        ></path>
      </svg>
      <div
        className="w-72 relative z-10 text-gray-900 flex justify-start items-center"
      >
        <button className="px-4 py-2.5">Home</button>
        <button className="pl-8 py-2.5">Booking</button>
        <button className="pl-12 py-2.5">Contact</button>
      </div>
    </div>
  
  </div>
  </>
}

您可以根据您的需要进行定制。您可以使用 Figma 制作自定义 SVG 背景以获得所需的结果。