方框，线性渐变，css 和 javascript

Question

I'm working with react JS and i look for a solution for linear gradient in different Box. When i have three same box in a row. I'have an example: When I've three same box like this: enter image description here

It Should be like that:

enter image description here

Do you have anea idea about this?

Thanks;

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

You can give the background to the container, and have another element who will cover all unused space from the child elements (and hide the background in that area)

 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>

Update

According to last comment I understand there gonna be few different gradients boxes in a row, while up to 3 can come in a row, and in this case they should collapce. in that case I offer this:

 .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

You can either add a big background and change its 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>

Or Add your boxes to a container that have this background

 .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

A simple solution:

You have 3 boxes so, add a color for the first one, a gradient for the second and a color for the last one... (check my demo)

App.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;
}

Demo: Stackblitz