Html 匹配两个div的渐变，如果它们具有不同的宽度

我有10个内联div，它们有相同的渐变类型-45度的线条，但是渐变有不同的颜色，div有不同的宽度

有可能匹配梯度吗？希望下面的图片能解释一下

我的CSS用于渐变。只有颜色变化

第一组{ 背景：重复线性渐变 45度， rgba155,0.8， rgba155,0.8 3px， RGBA250250,0.4 3px， RGBA250250,0.4 6px； } 第二组{ 背景：重复线性渐变 45度， RGBA235102107,0.6， RGBA235102107,0.6 3px， RGBA250250,0.4 3px， RGBA250250,0.4 6px； } div{ 高度：100px； 显示：内联块； }

---

将其设为一行div，并使用如下内容：

    .book {
      background-image: linear-gradient(105deg,
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
      url(../img/nat-10.jpg);

如果百分比相等，则会立即引起颜色变化，而不是逐渐变化。从白色到透明。因此，使用一个div将保持直线，百分比将改变颜色。我有一个倾斜，所以你需要改变初始角度

HTML:

我得到了这个：

<div id="div1" style="width: 100px; height: 50px;"></div>

---

我认为这样做就可以了：把你的div固定，然后在上面放一个带条纹的div。灵感来源于Byoung730

div{height:100px；display:inline block；} 第一组{ 背景：重复线性渐变 45度， rgba155,0.8， rgba155,0.8 3px， RGBA250250,0.4 3px， RGBA250250,0.4 6px； } 第二组{ 背景：重复线性渐变 45度， RGBA235102107,0.6， RGBA235102107,0.6 3px， RGBA250250,0.4 3px， RGBA250250,0.4 6px； } 第三组{ 背景：rgba155,0.8} 第四组{ 背景：RGBA235102107,0.6} 第五组{ 位置：相对位置； 顶部：-100px； 宽度：500px； 背景：重复线性渐变 45度， RGBA255255,1， RGBA255255,1 3px， RGBA255255,0 3px， RGBA255255,0 6px；} 你的例子是： 平滑的一个：

---

您可以在同一个元素上使用两个渐变，并使用背景剪辑技巧隐藏第一个渐变的一部分，该部分将一直隐藏到您将看到第二个渐变的填充处：

.盒子{ 高度：100px； 宽度：80px； 右边填充：50px； 保证金：5px； 显示：内联块； 背景： 重复线性梯度 45度， RGBA235102107,0.6， RGBA235102107,0.6 3px， RGBA250250,0.4 3px， RGBA250250,0.4 6px内容盒， 线性渐变fff，fff内容框，/*避免两个渐变重叠*/ 重复线性梯度 45度， rgba155,0.8， rgba155,0.8 3px， RGBA250250,0.4 3px， RGBA250250,0.4 6px填充盒； }

---

你能添加html吗？如果div有不同的渐变颜色，这个方法有效吗？非常感谢您用示例给出如此详细的答案！我选择了背景附件：固定，这对我来说很好。谢谢，这不适合我，因为我有不同的div宽度。我用另一个例子进行了测试，应该选择背景位置：-6px。但肯定有东西可以玩+1.

<div id="div1" style="width: 100px; height: 50px;"></div>