嗨，我太懂你这种烦恼了——用百分比设置clipPath做斜角区域时，页面一伸缩，斜角就跟着变形，完全不是你想要的固定角度效果对吧？

问题出在你原来用的百分比数值上：clipPath里的25%是相对于容器宽度的，当页面缩放时，容器宽度变化，底部那个锚点的水平位置跟着变，但容器高度也在改变，斜角的斜率（高度差/宽度差）就乱了，角度自然扭曲。

给你几个靠谱的解决方案，都是能让斜角角度固定、同时适配不同屏幕的：

方法一：用伪元素+Skew变换（最直观好维护） #

这个方法不用复杂的路径计算，靠CSS变换固定角度，兼容性也很好：

原理是：给右侧容器加一个伪元素做斜向背景，用skew给它固定角度，然后内部内容再反向skew回来，这样内容不会倾斜，背景的斜角却能保持不变。

修改你的代码如下：

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 relative overflow-hidden">
                        {/* 斜向背景伪元素：固定15度斜角 */}
                        <div className="absolute inset-0 bg-[#f7f7f7] transform skew-x-[-15deg] origin-top-right" />
                        {/* 内部内容：反向skew抵消变形，保持正常排版 */}
                        <div className="relative left-[10em] max-w-[675px] top-[8em] pr-[10em] transform skew-x-[15deg]">
                            <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>
        </>
    );
}

• overflow-hidden是为了切掉伪元素skew后超出容器的部分；
• origin-top-right确保skew的基准点在右上角，斜角的方向和你原来的效果一致；
• 内部内容的skew-x-[15deg]刚好抵消背景的斜向，文字和排版完全正常。

方法二：改进ClipPath，用角度计算固定锚点 #

如果你还是想用clipPath，可以用三角函数计算锚点位置，让它和容器高度挂钩，而不是只依赖宽度百分比：

比如你想要15度的斜角，先算出tan(15°)≈0.2679，然后用calc结合视口高度（vh）来计算底部锚点的位置：

<div
    className="flex-1 bg-[#f7f7f7] pr-[5em]"
    style={{
        // 核心：底部锚点位置 = 容器宽度 - 容器高度 × tan(角度)
        clipPath: `polygon(0 0, 100% 0, 100% 100%, calc(100% - 100vh * 0.2679) 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>

这里用100vh是因为你的容器高度是min-h-screen，如果容器高度不是视口高度，可以换成对应的高度单位（比如100%，前提是父容器高度确定）。这样不管页面怎么缩放，底部锚点的位置会跟着高度动态调整，斜角角度始终保持15度。

这两种方法都能解决你的问题，个人更推荐第一种伪元素+skew的方法，不用算三角函数值，后期调整角度也只需要改两个skew的数值，维护起来超方便！

试试看，应该能完美解决你的斜角变形问题😉

备注：内容来源于stack exchange，提问作者Rylan