Html 适合所需宽度的背景渐变度

我有一个简单的背景梯度，

45度

斜面：

如何设置梯度，使度数始终等于45（如果相反，则为315），并且在任何屏幕分辨率下，图的顶面始终为200px：

---

我还准备了一个代码笔，显示了我的意思：

一个想法是将其分为两个渐变，第一个渐变覆盖200px，第二个渐变覆盖45度，要始终保持45度，必须使其始终为正方形：

.top{
右边框：200px纯绿；
高度：30px；
背景颜色：黄色；
框大小：边框框；
}
.底部{
--h:300px；
高度：var（--h）；
背景：
线性梯度（左上角，绿色50%，黄色50%）计算（100%-200px）0/var（--h）var（--h）无重复，
线性梯度（绿色，绿色）100%0/200px 100%无重复；
背景颜色：黄色；
}

不错。但是我必须确定高度，对吗？@sdvnksv我会说你很感激，因为你没有百分位。。。但是，如果你设法以一种动态的方式使用，我们会找到一个技巧，让它在没有固定高度的情况下工作，我会考虑；）高度取决于内容，所以很遗憾，我无法设置固定的高度。我发现只添加我在photoshop中制作的图片要简单得多，麻烦也小得多。

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