如何使用 CSS 创建对角线“渐变”背景

Question

这里有人知道如何创建一个看起来像这样的蓝色渐变吗？ （下图）

我只能制作纯色，但渐变似乎不知道如何（这是我的代码）

 <div style="background: -webkit-linear-gradient(-100deg, #fff 50%, #063852 0%); height:300px"> </div>

Answer 1

而是使用background: -webkit-linear-gradient 。 请使用background-color: linear-gradient 。 我对您的代码做了一些更改，得到了您需要的 output。 如果要增加渐变，请更改颜色旁边的%值。 如果对您有用，请投票给答案。

 <div style="background-image: linear-gradient(-170deg, #fff 50%, #063852 110% ); height:300px"></div>

Answer 2

<div style="background-image: -webkit-linear-gradient(-170deg, #fff 50%, #063852 110% );height:300px"></div>

Answer 3

更新：设法解决它。 只需为其添加额外的颜色代码。

 <div style="background: -webkit-linear-gradient(256deg, #fff 53%, #6d87bf 20%, #011520 100%); height:300px"> </div>