CSS 背景线性渐变曲线

Question

我正在尝试创建 3 种不同颜色的蓝色背景。 3 种蓝色中的 2 种将略微弯曲和倾斜。

主背景蓝色： #005A83
第一个浅蓝色： #036595
第二个浅色蓝色： #0571A4

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

我尝试在这里重新创建类似这样的图像：

这是我的代码示例：

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

我有这两个主要部分的问题。

我在显示 2 种较浅的蓝色时遇到问题。 目前仅显示 1 种颜色。 我试图通过移动一些用于线性渐变的百分比来解决这个问题，但它与 colors 混合在一起，这更难看到。
如何弯曲较浅的阴影以匹配上面显示不同蓝色阴影的图像。

Answer 1

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

我在下面有一个粗略的 go。 您需要调整圆的大小（第一个值）、偏移量（第二个和第三个值）以及各个停止百分比，以获得您认为完美的结果。

 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

您可以使用多个 HTML 元素来实现所需的结果。

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

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