javascript - 在交汇点混合两个 div

Question

我怎样才能将两个 div 的颜色沿着它们的交汇点边界无缝混合？基本上寻找将在它们之间滚动的渐变。 CSS、JavaScript，选择你的毒药。显然是 CSS 的加分项。

尝试了 box-shadow 但我无法真正控制它沿着它们的交汇边缘，而且它到处都是流血。

http://jsfiddle.net/q131p8w2/2/

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

Answer 1

此片段可能会导致某些事情发生。

div:nth-child(1) {
  color: skyblue;
}
div:nth-child(2) {
  color: black;
}
div {
  position: relative;
  background: currentColor;
  height: 150px;
  width: 300px;
  margin: 0 auto;
}
div:before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  background: linear-gradient(currentColor, transparent);
  pointer-events: none;
}

<div></div>
<div></div>