Css 混合对角线线性渐变

我创建了这个图案，由蓝色和红色线条组成。但我找不到一种方法来混合红色和蓝色线条（如果我正确的话，可以混合成深紫色），它们相互交叉（见第三种情况）。有什么想法吗？使用透明度没有帮助，因为我只想在它们交叉的地方使用它

div{
宽度：50px；高度：100px；
边框：纯色2px黑色；
浮动：左；
利润率：10px；
字体大小：30px；
字体大小：粗体；
}
.caro-pattern 1{
背景色：#2ECC40；
背景图像：线性梯度（-45度，蓝色5%，透明5%，透明45%，蓝色45%，蓝色55%，透明55%，透明95%，蓝色95%）；
背景尺寸：50px 50px；
}
.caro-patterns 2{
背景色：#2ECC40；
背景图像：
线性梯度（45度，红色5%，透明5%，透明45%，红色45%，红色55%，透明55%，透明95%，红色95%）；
背景尺寸：50px 50px；
}
.caro-pattern3{
背景色：#2ECC40；
背景图像：
线性梯度（45度，红色5%，透明5%，透明45%，红色45%，红色55%，透明55%，透明95%，红色95%），
线性梯度（-45度，蓝色5%，透明5%，透明45%，蓝色45%，蓝色55%，透明55%，透明95%，蓝色95%）；
背景尺寸：50px 50px；
}

1
2.
3

您可以尝试新的

背景混合模式

，该模式目前已在编者的草稿中

参考文献：和

但请注意，这目前不受支持。只剩下Chrome和Firefox：(

示例代码段：

div{
宽度：50px；高度：100px；
边框：纯色2px黑色；
利润率：10px；
}
.caro-pattern3{
背景色：#2ECC40；
背景图像：
线性梯度（45度，红色5%，透明5%，透明45%，红色45%，红色55%，透明55%，透明95%，红色95%），
线性梯度（-45度，蓝色5%，透明5%，透明45%，蓝色45%，蓝色55%，透明55%，透明95%，蓝色95%）；
背景尺寸：50px 50px；
背景混合模式：颜色，强光；
}

---

3

您只有一个可能性，而不会改变您当前的方法

只需设置两次红色条纹，第一次没有透明度。在顶部，设置蓝色条纹，在顶部设置红色条纹，现在使用alpha：

div{
宽度：50px；
高度：100px；
边框：纯色2px黑色；
浮动：左；
利润率：10px；
字体大小：30px；
字体大小：粗体；
}
.caro-pattern3{
背景色：#2ECC40；
背景图像：
线性梯度（45度，rgba（255,0,0,5）5%，透明5%，透明45%，rgba（255,0,0,5）45%，rgba（255,0,0,5）55%，透明55%，透明95%，rgba（255,0,0,5）95%），
线性梯度（-45度，蓝色5%，透明5%，透明45%，蓝色45%，蓝色55%，透明55%，透明95%，蓝色95%），
线性梯度（45度，红色5%，透明5%，透明45%，红色45%，红色55%，透明55%，透明95%，红色95%）；
背景尺寸：50px 50px；
}

---

3

您可以使用

rgba（）

颜色来实现这一点……就像这样：@Minal Chauhan，这不是我想要的，我只是尝试将蓝色与红色混合。感谢您的时间，我使用Chrome，但它不起作用，红色在任何地方都是透明的。我希望它只有在与蓝色交叉时才是透明的。