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

Question

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

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

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

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

Answer 1

一个想法是将其分成两个渐变，第一个将覆盖 200px，第二个将具有 45deg 并且始终具有 45deg 你必须使其始终成为 square:

.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>

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

Background gradient degree to fit a desired width

html

css

linear-gradients