左下角线性渐变分隔线

Question

我希望线性渐变的两种颜色之间的分隔线始终从左下角开始。

这个例子是硬编码的，如果我调整 window 的大小，它就不再起作用了。旋转应该保持不变。所以颜色的百分比值应该改变。

linear-gradient(172deg, #0000ff 69%, #ff0000 69%)

Answer 1

你可以像下面这样多背景试试：

html {
  min-height:100%;
  background:
    linear-gradient(to bottom right,transparent 49.8%, red 50%) left bottom /
    2000px /* Keep this always big to have the same angle*/ 
    300px  /* adjust this to control the angle. angle = acrtan(300/2000) */
    no-repeat,
    blue;
}

左下角线性渐变分隔线

Separating line of linear gradient at bottom left corner

css

linear-gradients