你原来的渐变方案用了50%的颜色断点，这会导致容器宽度变化时，绿色区域的垂直高度跟着改变——因为45度渐变的斜线位置是由容器宽高比决定的。要实现角度始终保持45度（或315度），且顶部绿色区域垂直高度固定200px的需求，这里有两种实用方案：

方案一：纯渐变结合calc()计算 #

利用315度渐变的方向特性，我们可以通过calc()精准计算渐变停止点，确保斜线距离顶部的垂直高度始终为200px：

.foo-bottom {
  height: 500px;
  background: linear-gradient(315deg, green calc(100% - 200px), yellow calc(100% - 200px));
}

原理很简单：315度渐变是从右上到左下的方向，calc(100% - 200px)会让渐变斜线刚好落在距离顶部垂直高度200px的位置，无论容器宽度如何变化，这个垂直高度都能保持固定。

方案二：伪元素+变换（更直观易维护） #

如果觉得渐变的计算逻辑不好理解，用伪元素配合skew变换是更直观的选择：

.foo-bottom {
  height: 500px;
  position: relative;
  overflow: hidden;
  background-color: yellow; /* 黄色作为底色 */
}

.foo-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* 设足够大的宽度，确保覆盖所有屏幕宽度 */
  width: 200%;
  height: 200px;
  background-color: green;
  /* 向右倾斜45度，实现45度斜线分隔 */
  transform: skew(-45deg);
  /* 以右上角为变换原点，保证顶部高度固定 */
  transform-origin: top right;
}

这个方案的思路是：用伪元素创建一个200px高的绿色区域，通过skew(-45deg)让它倾斜45度，再用overflow:hidden隐藏容器外的部分。不管屏幕宽度怎么变，绿色区域的顶部垂直高度始终是200px，斜线角度也保持45度。

两种方案都能满足需求，如果你偏爱纯渐变实现就选方案一；如果追求代码可读性和易维护性，方案二更合适。

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