求助：实现响应式HTML斜向分屏背景（非对角分割）

你的原代码存在两个核心问题：

• 用114vh设置高度，超出视口范围直接导致滚动条；
• linear-gradient(to right bottom)是固定对角方向，无法锁定底部分割点的比例位置，换屏幕后分割效果必然走形。

推荐用clip-path实现，能精准控制分割线的两个锚点，且完全响应式：

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 彻底避免滚动条 */
  position: relative;
  background-color: white; /* 基础底色 */
}

body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue; /* 分割区域颜色 */
  /* 裁剪路径：锚点依次为右上角→底部25%位置→左下角→左上角→右上角 */
  clip-path: polygon(100% 0, 25% 100%, 0 100%, 0 0);
}

如果不想用伪元素，也可以用计算后的渐变角度实现（角度基于分割点比例动态计算），不过不如clip-path直观：

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* 角度计算：基于底部25%的分割点，用arctan(100/(100-25))≈53.13°，渐变角度为180-53.13=126.87° */
  background: linear-gradient(126.87deg, white 50%, blue 50%);
}

两种方法都能保证：

• 分割线始终连接右上角和底部水平边的25%位置；
• 任何屏幕尺寸下都不会出现滚动条；
• 完全响应式，缩放窗口时分割比例保持不变。

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