背景渐变度以适合所需宽度答案

【问题标题】：Background gradient degree to fit a desired width背景渐变度以适合所需宽度
【发布时间】：2018-03-20 10:51:58
【问题描述】：

我有一个 45deg 倾斜的简单背景渐变：

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

如何设置渐变，使度数始终等于 45（如果反向，则为 315），并且在任何屏幕分辨率下，我得到的无花果的顶部始终为 200 像素：

我还准备了一个代码笔来说明我的意思：https://codepen.io/Deka87/pen/JLEeXM。

【问题讨论】：

我发现只添加我在 Photoshop 中制作的图片就容易多了，也少了很多麻烦。

标签： html css linear-gradients

【解决方案1】：

一个想法是将其分成两个渐变，第一个将覆盖 200px，第二个将具有 45deg，并且始终具有 45deg，您必须使其始终为 正方形：

.top {
  border-right: 200px solid green;
  height:30px;
  background-color: yellow;
  box-sizing:border-box;
}

.bottom {
  --h:300px;
  height:var(--h);
  background:
  linear-gradient(to top left,green 50%,yellow 50%) calc(100% - 200px) 0/var(--h) var(--h) no-repeat,
  linear-gradient(green,green)100% 0/200px 100% no-repeat;
  background-color:yellow;
}

<div class="top"></div>
<div class="bottom">
</div>

更新

如果元素的高度是动态的，只需通过保持平方比为渐变大小指定一个较大的值：

.top {
  border-right: 200px solid green;
  height:30px;
  background-color: yellow;
  box-sizing:border-box;
}

.bottom {
  height:50px;
  background:
  linear-gradient(to top left,green 50%,yellow 50%) calc(100% - 200px) 0/2000px 2000px  no-repeat,
  linear-gradient(green,green)100% 0/200px 100% no-repeat;
  background-color:yellow;
}

<div class="top"></div>
<div class="bottom">
</div>
---
<div class="top"></div>
<div class="bottom" style="height:100px">
</div>
---
<div class="top"></div>
<div class="bottom" style="height:600px">
</div>

奖金

您还可以使用一个元素组合顶部和底部元素：

.box {
  border-top:30px solid transparent;
  border-image:linear-gradient(to left,green 200px,yellow 200px) 1;
  height:200px;
  background:
  linear-gradient(to top left,green 50%,yellow 50%) calc(100% - 200px) 0/2000px 2000px  no-repeat,
  linear-gradient(green,green)100% 0/200px 100% no-repeat;
  background-color:yellow;
}

<div class="box">
</div>

【讨论】：

不错的一个。但是我必须固定高度，对吗？
@sdvnksv 我会说你有义务，因为你没有分钱......但你设法以一种动态的方式使用它，我们找到一个让它在没有固定高度的情况下工作的技巧，我会的想想看；）
高度取决于内容，所以很遗憾我无法设置固定高度。