CSS 背景线性渐变曲线

Question

I'm attempting to create a background of 3 different color shades of blue.我正在尝试创建 3 种不同颜色的蓝色背景。 2 of the 3 shades of blue will be curved and angled slightly. 3 种蓝色中的 2 种将略微弯曲和倾斜。

Main background blue: #005A83主背景蓝色： #005A83
First lighter shade blue: #036595第一个浅蓝色： #036595
Second lighter shade blue: #0571A4第二个浅色蓝色： #0571A4

I've done some research and I believe I can achieve this by using linear-gradient but I'm still having some issues getting the look I am expecting.我已经做了一些研究，我相信我可以通过使用线性渐变来实现这一点，但我仍然遇到一些问题来获得我所期望的外观。

I attempt to re-create something like this image here:我尝试在这里重新创建类似这样的图像：

Here is my code sample:这是我的代码示例：

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

I am having issues with 2 main parts of this.我有这两个主要部分的问题。

I am having issues showing the 2 lighter shades of blue.我在显示 2 种较浅的蓝色时遇到问题。 Currently only showing 1 color.目前仅显示 1 种颜色。 I've attempted to fix this by moving around some of the percentages used for linear-gradient but it blends in the colors together which is more difficult to see.我试图通过移动一些用于线性渐变的百分比来解决这个问题，但它与 colors 混合在一起，这更难看到。
How can I curve the lighter shades to match the image above showing different shades of blue.如何弯曲较浅的阴影以匹配上面显示不同蓝色阴影的图像。

Answer 1

You can do a radial gradient and then shift its center off the page.您可以进行径向渐变，然后将其中心移出页面。 You'll need quite a larger radius based on your sample.根据您的样本，您将需要更大的半径。

I had a rough go at it below.我在下面有一个粗略的 go。 You will need to adjust the circle size (first value), offsets (second and third value), and the individual stop percentages to get what you deem is perfect.您需要调整圆的大小（第一个值）、偏移量（第二个和第三个值）以及各个停止百分比，以获得您认为完美的结果。

 html, body { height: 100%; } body { background: rgb(0,90,131); background: 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%); }

Answer 2

You can use multiple HTML elements to achieve the desired result.您可以使用多个 HTML 元素来实现所需的结果。

 <body>
    <div class="container">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
    </div>
  </body>

CSS CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  height: 500px;
  width: 100%;
  background-color: rgb(10, 5, 87);
  overflow: hidden;
}

.circle1 {
  border-radius: 100%;
  position: absolute;
  background-color: rgb(0, 0, 105);
  left: 0;
  bottom: 0;
  height: 600px;
  width: 600px;
  transform: translate(-50%, 50%);
  z-index: 4;
}

.circle2 {
  border-radius: 100%;
  position: absolute;
  background-color: rgb(22, 22, 148);
  left: 0;
  bottom: 0;
  height: 1200px;
  width: 1200px;
  transform: translate(-50%, 50%);
  z-index: 3;
}

.circle3 {
  border-radius: 100%;
  position: absolute;
  background-color: rgb(6, 6, 180);
  left: 0;
  bottom: 0;
  height: 1800px;
  width: 1800px;
  transform: translate(-50%, 50%);
  z-index: 2;
}

CSS 背景线性渐变曲线

问题描述

2 个解决方案

解决方案1
1 2021-11-18 07:02:52

解决方案2
0 2021-11-19 02:55:27

CSS 背景线性渐变曲线

问题描述

2 个解决方案

解决方案1 1 2021-11-18 07:02:52

解决方案2 0 2021-11-19 02:55:27

解决方案1
1 2021-11-18 07:02:52

解决方案2
0 2021-11-19 02:55:27