html - CSS背景线性渐变曲线

Question

我正在尝试创建 3 种不同颜色的蓝色背景。 3 种蓝色阴影中的 2 种会 flex 并略微倾斜。

• 主背景蓝色:#005A83
• 第一个较浅的蓝色阴影:#036595
• 第二种浅蓝色:#0571A4

我做了一些研究，我相信我可以通过使用线性渐变来实现这一点，但我在获得我期望的外观方面仍然遇到一些问题。

我试图在这里重新创建类似这张图片的东西:

这是我的代码示例:

html, body {
    height: 100%;
}
body {

    background: linear-gradient(65deg, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%);
}

我对这两个主要部分有疑问。

1. 我在显示 2 种较浅的蓝色阴影时遇到问题。目前仅显示 1 种颜色。我试图通过移动一些用于线性渐变的百分比来解决这个问题，但它会将颜色混合在一起，这更难以看到。

2. 如何 flex 较浅的阴影以匹配上面显示不同蓝色阴影的图像。

Answer 1

您可以进行径向渐变，然后将其中心移出页面。根据您的示例，您需要相当大的半径。

我在下面做了一个粗略的尝试。您需要调整圆圈大小(第一个值)、偏移量(第二个和第三个值)和各个停止百分比以获得您认为完美的结果。

html, body {
    height: 100%;
}
body {
    background: rgb(0,90,131) radial-gradient(circle 5000px at -200px 200%, rgba(0,90,131,1) 0%, rgba(0,90,131,1) 10%, rgba(3,101,149,1) 10%, rgba(3,101,149,1) 12%, rgba(5,113,164,1) 12%, rgba(5,113,164,1) 13%, rgba(0,90,131,1) 13%, rgba(0,90,131,1) 100%);
}