1

I have tried to find a solution to this problem but the closest I came to solving it can be seen in picture number 2.

Example of should be made Example of should be made

What my solution looks like What my solution looks like

Here is the code I used to create this:

<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>
Kacper Kucharski
  • 11
  • 3
  • this might help...https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_parallel – kazmi066 Jun 08 '22 at 18:15
  • Please translate all of your post to English. – isherwood Jun 08 '22 at 18:18
  • It would be better if you posted rendered HTML and CSS. Work the problem from that, then migrate to your app code. – isherwood Jun 08 '22 at 18:18
  • I've posted my code as an example of how I tried to do it. I think there should be a more viable solution to it than what I made. The biggest problem is the fact that the hover area of the buttons is not a parallelogram but a block, this makes it more difficult to align those buttons next to each other to make them work properly (when hovering over certain parts of the "Our Mission" button the hover for "About Us" get activated instead) – Kacper Kucharski Jun 08 '22 at 19:54

0 Answers0