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