React中如何为菜单创建平行四边形形状按钮

我已尝试查找该问题的解决方案，目前最接近预期的实现效果如下。

预期实现效果示例 #

当前实现效果 #

现有实现代码 #

<div className="bg-green flex h-[120px] lg:h-[400px] ">
    <div className="w-full h-full flex relative mx-auto">
      <div className="font-bold z-50 text-left ml-2 lg:ml-10 my-auto lg:text-4xl 2xl:text-5xl w-1/5 text-xs lg:max-w-[386px] drop-shadow-md">
        Kwaliteit en duurzaamheid staan bij ons centraal
      </div>

      <div className="flex w-full justify-end">
        <div className="flex h-full relative group hover:cursor-pointer">
          <span className="border-[#2DAF34] bg-[#2DAF34] absolute h-full bottom-0 left-[10px] lg:left-[46px] border-x-[1px] lg:border-x-2 -skew-x-12 lg:-skew-x-[14deg] group-hover:hidden" />

          <div className="border-b-[120px] lg:border-b-[400px] border-solid border-green group-hover:border-black border-l-[25px] lg:border-l-[100px] border-l-transparent group-hover:border-l-transparent transition ease-in-out duration-200"></div>

          <div className="bg-green w-10 lg:w-1/2 h-full group-hover:bg-black flex flex-col justify-center text-center transition ease-in-out duration-200">
            <People className="w-full h-1/2 mx-auto" />
            <span className="text-sm">Over Ons</span>
          </div>

          <div className="border-t-[120px] lg:border-t-[400px] border-solid border-green group-hover:border-black border-r-[25px] lg:border-r-[100px] border-r-transparent group-hover:border-r-transparent transition ease-in-out duration-200"></div>
          <span className="border-[#2DAF34] bg-[#2DAF34] absolute h-full bottom-0 right-[11px] lg:right-[46px] border-x-[1px] lg:border-x-2 -skew-x-12 lg:-skew-x-[14deg] group-hover:hidden" />
        </div>

        <div className="flex h-full relative group hover:cursor-pointer">
          <span className="border-[#2DAF34] bg-[#2DAF34] absolute h-full bottom-0 left-[10px] lg:left-[46px] border-x-[1px] lg:border-x-2 -skew-x-12 lg:-skew-x-[14deg] group-hover:hidden" />

          <div className="border-b-[120px] lg:border-b-[400px] border-solid border-green group-hover:border-black border-l-[25px] lg:border-l-[100px] border-l-transparent group-hover:border-l-transparent transition ease-in-out duration-200"></div>

          <div className="bg-green w-10 lg:w-1/2 h-full group-hover:bg-black flex flex-col justify-center text-center transition ease-in-out duration-200">
            <Target className="w-full h-1/2 mx-auto" />
            <span className="text-sm">Onze Missie</span>
          </div>

          <div className="border-t-[120px] lg:border-t-[400px] border-solid border-green group-hover:border-black border-r-[25px] lg:border-r-[100px] border-r-transparent group-hover:border-r-transparent transition ease-in-out duration-200"></div>
          <span className="border-[#2DAF34] bg-[#2DAF34] absolute h-full bottom-0 right-[11px] lg:right-[46px] border-x-[1px] lg:border-x-2 -skew-x-12 lg:-skew-x-[14deg] group-hover:hidden" />
        </div>

        <div className="flex h-full relative group hover:cursor-pointer">
          <span className="border-[#2DAF34] bg-[#2DAF34] absolute h-full bottom-0 left-[10px] lg:left-[46px] border-x-[1px] lg:border-x-2 -skew-x-12 lg:-skew-x-[14deg] group-hover:hidden" />

          <div className="border-b-[120px] lg:border-b-[400px] border-solid border-green group-hover:border-black border-l-[25px] lg:border-l-[100px] border-l-transparent group-hover:border-l-transparent transition ease-in-out duration-200"></div>

          <div className="bg-green w-10 lg:w-1/2 h-full group-hover:bg-black flex flex-col justify-center text-center transition ease-in-out duration-200">
            <Vision className="w-full h-1/2 mx-auto" />
            <span className="text-sm">Onze Vissie</span>
          </div>

          <div className="border-t-[120px] lg:border-t-[400px] border-solid border-green group-hover:border-black border-r-[25px] lg:border-r-[100px] border-r-transparent group-hover:border-r-transparent transition ease-in-out duration-200"></div>
          <span className=" border-[#2DAF34] bg-[#2DAF34] absolute h-full bottom-0 right-[11px] lg:right-[46px] border-x-[1px] lg:border-x-2 -skew-x-12 lg:-skew-x-[14deg] group-hover:hidden" />
        </div>
      </div>
    </div>
  </div>

内容的提问来源于stack exchange，提问作者Kacper Kucharski