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

Question

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

https://codepen.io/Deka87/pen/JLEeXM

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

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

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

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