与css的三角背景

Question

我想创建一个div，背景如下：

但我也希望将它缩放为宽度100％和高度约500px。我使用了一些梯度生成器，但我必须指定度，我无法缩放它。我可以只使用css吗？

我希望在这个背景中准确地从一个角落到另一个角落。

唯一的选择是否也是尺度高度？例如50％并在渐变属性中指定精确度数值？

Answer 1

可以在没有角度的情况下定义线性渐变，而使用位置

JSfiddle Demo

渐变默认值来自左上角

linear-gradient(to bottom right, red, red 50%, blue 50% , blue);