方框，線性漸變，css 和 javascript

Question

我正在使用 React JS，我正在尋找不同 Box 中線性漸變的解決方案。 當我連續三個相同的盒子時。 我有一個例子：當我有三個這樣的相同框時：在此處輸入圖像描述

應該是這樣的：

在此處輸入圖像描述

你對此有什么想法嗎？

謝謝;

Answer 1

 .box { width: 200px; height: 200px; margin: 0 auto; }.box--gradient { background-image: linear-gradient(#2a6496, #fff 70%, #011852); }

 <div class="box box--gradient"></div>

Answer 2

您可以為容器提供背景，並讓另一個元素覆蓋子元素中所有未使用的空間（並隱藏該區域中的背景）

 html, body { background-color: white; }.cont { display:flex; background: linear-gradient(to right, red, yellow, green, blue) no-repeat; }.spacer { width: 100%; background-color: white; }.box { width: 100px; height: 100px; flex-shrink:0; display: flex; justify-content:center; align-items:center; }

 <h1>One box</h1> <div class="cont"> <div class="box">1</div> <div class="spacer"></div> </div> <h1>Three boxes</h1> <div class="cont"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="spacer"></div> </div>

更新

根據最后的評論，我知道連續會有幾個不同的漸變框，而最多可以連續出現 3 個，在這種情況下它們應該折疊。 在這種情況下，我提供這個：

 .cont { display: flex; overflow: auto; }.grad-1 { background-image: linear-gradient(to right, red, yellow, green); }.grad-2 { background-image: linear-gradient(to right, blue, purple, pink); }.grad-3 { background-image: linear-gradient(to right, white,silver, black); } [class^=grad]{ width: 100px; height: 100px; flex-shrink:0; background-size: 300% 100%; background-position: top left; }.grad-1+.grad-1,.grad-2+.grad-2,.grad-3+.grad-3 { background-position: top center; }.grad-1+.grad-1+.grad-1,.grad-2+.grad-2+.grad-2,.grad-3+.grad-3+.grad-3 { background-position: top right; }

 <div class="cont"> <div class="grad-1"></div> <div class="grad-1"></div> <div class="grad-3"></div> <div class="grad-2"></div> <div class="grad-2"></div> <div class="grad-2"></div> <div class="grad-3"></div> <div class="grad-1"></div> <div class="grad-1"></div> <div class="grad-3"></div> <div class="grad-3"></div> <div class="grad-3"></div> </div>

Answer 3

您可以添加一個大背景並更改其 position

 body { display: flex; }.box { width: 100px; height: 100px; background: linear-gradient(to right, blue, red); background-size: 1300%; }.box:nth-child(1) { background-position: 0 0; }.box:nth-child(2) { background-position: 8.33% 0; }.box:nth-child(3) { background-position: 16.66% 0; }.box:nth-child(4) { background-position: 25% 0; }.box:nth-child(5) { background-position: 33.33% 0; }.box:nth-child(6) { background-position: 41.66% 0; }.box:nth-child(7) { background-position: 50% 0; }.box:nth-child(8) { background-position: 58.33% 0; }.box:nth-child(9) { background-position: 66.66% 0; }.box:nth-child(10) { background-position: 75% 0; }.box:nth-child(11) { background-position: 83.33% 0; }.box:nth-child(12) { background-position: 91.66% 0; }.box:nth-child(13) { background-position: 100% 0; }

 <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> <div class="box">11</div> <div class="box">12</div> <div class="box">13</div>

或將您的盒子添加到具有此背景的容器中

 .container { display: flex; background: linear-gradient(to right, blue, red); }.box { width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; }

 <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>

Answer 4

一個簡單的解決方案：

你有 3 個盒子，所以，為第一個添加一個顏色，為第二個添加一個漸變，為最后一個添加一個顏色......（查看我的演示）

應用程序.js

import React from 'react';
import './style.css';

export default function App() {
  return (
      <div>
        <div className="row">
          <div className="box"> </div>
          <div className="box"> </div>
          <div className="box"> </div>
        </div>
      </div>
  );
}

Styles.css

.row {
  display: flex;
}
.row .box:first-of-type {
  height: 150px;
  width: 33%;
  border: 1px solid black;
  background: #44107a;
}
.row .box {
  height: 150px;
  width: 33%;
  border: 1px solid black;
  background-image: linear-gradient(90deg, #44107a 0%, #ff0032 100%);
}
.row .box:last-of-type {
  height: 150px;
  width: 33%;
  border: 1px solid black;
  background: #ff0032;
}

演示： Stackblitz