如何使2色对角线背景灵活而不扭曲角度？ Tailwind 和 Javascript

Question

我试图制作一个有角度的部分，其中包含我正在处理的应用程序的图像以及一些有关它的文本，我最终得到了多边形的正确尺寸，并且我让它弯曲，但由于我使用百分比，角度喜欢弯曲时变形（见下图）

不可弯曲： 在此输入图片描述

随着弯曲： 在此输入图片描述

我不确定处理这种特定情况的最佳方法是什么，同时又使页面保持与显示器相同的大小而不影响角度。下面的代码是到目前为止我如何获取多边形的。

    function Login() {
    return (
        <>
            <div className="flex flex-col min-h-screen overflow-hidden relative">
                <Navbar />
                <div className="flex-grow flex">
                    <div className="flex-1 flex items-center justify-start bg-white z-10 ml-[5em]">
                        <Form />
                    </div>
                    <div
                        className="flex-1 bg-[#f7f7f7] pr-[5em]"
                        style={{
                            clipPath: `polygon(0 0, 100% 0, 100% 100%, 25% 100%)`,
                        }}
                    >
                        <div className="relative left-[10em] max-w-[675px] top-[8em] rotate-[-15deg] pr-[10em]">
                            <h1 className="text-[24px] font-semibold max-w-[300px] mb-4">This is a Title</h1>
                            <p className="flex font-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi adipisci officia enim quas laudantium illo! Ea, temporibus? Provident voluptatem in perspiciatis, a nemo fuga? Magni atque dicta assumenda alias deserunt?</p>
                        </div>
                    </div>
                </div>
                <DarkModeButton />
            </div>
        </>
    );
}

我尝试使用矩形或不同的值作为剪辑路径，甚至尝试旋转整个路径，但不幸的是，它隐藏了角（不是由于溢出隐藏），出现了一些奇怪的问题。任何帮助表示赞赏！ :)

Answer 1

为了获得一致的角度，您需要将剪辑路径的左下水平偏移基于元素的高度。这可以通过以下方式完成：

• 使用 Tailwind 类将其设为大小容器

  [container-type:size]

  。
• 在 cqh

   值中使用 

  clip-path()

   单位

  ，例如

  20cqh

  表示高度的 20%。

<script src="https://cdn.tailwindcss.com/3.4.16"></script>

<div id="app"></div>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module">
  import React from "https://esm.sh/react@19";
  import client from "https://esm.sh/react-dom@19/client";
  
  const Navbar = () => <div>Navbar</div>
  const Form = () => <div>Form</div>
  const DarkModeButton = () => <div>DarkModeButton</div>
  
  function Login() {
    return (
      <>
        <div className="flex flex-col min-h-screen overflow-hidden relative">
          <Navbar />
          <div className="flex-grow flex">
            <div className="flex-1 flex items-center justify-start bg-white z-10 ml-[5em]">
              <Form />
            </div>
            <div
              className="flex-1 bg-[#f7f7f7] pr-[5em] [container-type:size]"
              style={{
                clipPath: `polygon(0 0, 100% 0, 100% 100%, 20cqh 100%)`,
              }}
            >
              <div className="relative left-[10em] max-w-[675px] top-[8em] rotate-[-15deg] pr-[10em]">
                <h1 className="text-[24px] font-semibold max-w-[300px] mb-4">
                  This is a Title
                </h1>
                <p className="flex font-light">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Excepturi adipisci officia enim quas laudantium illo! Ea,
                  temporibus? Provident voluptatem in perspiciatis, a nemo fuga?
                  Magni atque dicta assumenda alias deserunt?
                </p>
              </div>
            </div>
          </div>
          <DarkModeButton />
        </div>
      </>
    );
  }

  const rootElement = document.getElementById("app");
  client.createRoot(rootElement).render(<Login />);
</script>