Javascript 在两个div的交点处混合两个div

如何沿相交点边界无缝混合两个div的颜色？基本上是寻找一个梯度，将他们之间滚动。CSS，JavaScript，选择你的毒药。很明显，CSS有额外的积分

我试过用方块阴影，但我真的不能像我想的那样沿着他们的会合边缘控制它，而且它到处都是血

---

它必须是两个div的混合吗？或者你可以用这样的东西，一个渐变div，两倍的高度

div:nth-child(1) {
    background: linear-gradient(skyblue, black)
    height:300px;
    width:300px;
    margin:0 auto;
}

---

这可能会有所帮助：

这段代码可能是某种线索

div:n子级（1）{
颜色：天蓝色；
}
分区：第n个孩子（2）{
颜色：黑色；
}
div{
位置：相对位置；
背景：彩色；
高度：150像素；
宽度：300px；
保证金：0自动；
}
部门：以前{
内容：“；
显示：块；
宽度：100%；
身高：50%；
位置：绝对位置；
最高：100%；
左：0；
z指数：10；
转化：translateY（-50%）；
背景：线性渐变（currentColor，透明）；
指针事件：无；
}

---

可以使用中间色，如

rgb（71109124）

并将一些

线性梯度（）

设置为

background

：

div:nth-child(1) {
    background: linear-gradient(skyblue 95%, rgb(71, 109, 124));
    height:150px;
    width:300px;
    margin:0 auto;
}
div:nth-child(2) {
    background: linear-gradient(rgb(71, 109, 124), black 5%);
    height:150px;
    width:300px;
    margin:0 auto;
}

---

我想，你可以把每个div做成一个单独的渐变。你可以让div1从蓝色渐变到介于黑色和蓝色之间，div2从一半渐变到黑色。然后，只要div的边缘对齐，它就应该工作

你可以使用我上面提到的梯度

这是我的密码。我使用十六进制颜色选择器来获取中间颜色的值。此版本仅适用于safari，但您可以将其更改为适用于所有浏览器

div:nth-child(1) {
    background: -webkit-linear-gradient(skyblue, #000066);
    height:150px;
    width:300px;
    margin:0 auto;
}
div:nth-child(2) {
    background: -webkit-linear-gradient(#000066, black);
    height:150px;
    width:300px;
    margin:0 auto;
}

---

不幸的是，必须是两个div。然而，请欣赏这种想法！谢谢你。这是一个绝妙的技术，我最终调整了它。使用透明给了太多的粗糙边缘，所以我只是将其应用于第一个div，并使用了两种不同的颜色。非常感谢！如果您不需要灵活的代码，那么这就是解决方法。我喜欢使用干代码：）@daveycroqet另外，我认为另一个方法可能是使用线性背景而不是常规背景，并使

相互重叠。

div:nth-child(1) {
    background: -webkit-linear-gradient(skyblue, #000066);
    height:150px;
    width:300px;
    margin:0 auto;
}
div:nth-child(2) {
    background: -webkit-linear-gradient(#000066, black);
    height:150px;
    width:300px;
    margin:0 auto;
}