长方体、线性渐变、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

一个简单的解决方案：

你有3个框，所以，为第一个添加颜色，为第二个添加渐变，为最后一个添加颜色。。。(查看我的演示(

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>
);
}

样式.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;
}

演示：Stacklitz

Answer 4

您可以添加一个大背景并更改其位置

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>