Соседние перекосы делят промежуток в 1 пиксель между ними

Question

У меня есть два наклонных делителя с линейным градиентным фоном, которые должны идеально совмещаться, но между ними остается разрыв в 1 пиксель.

Эта скрипка демонстрирует проблему: https://jsfiddle.net/jesperryom/rn1ncd5u/

Я видел два предложенных решения (перемещение одного div на 1px для компенсации или предоставление им прозрачной границы), но ни одно из них не работает, когда цвет фона div является линейным градиентом, как показано на этом изображении:

Левый имеет div сместился на 1px, правый имеет прозрачные границы

Есть идеи?

HTML

<div id="top"></div>
<div id="left"></div>

CSS

#top {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0));
  transform-origin: left top;
  transform: skew(45deg);
}

#left {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 200px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0));
  transform-origin: left top;
  transform: skewY(45deg);
}

Answer 1

С тенью коробки управлять гораздо сложнее, но у нее нет этой проблемы

#top {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 50px;
    transform-origin: left top;
    transform: skew(45deg);
    box-shadow: inset -22px 45px 80px -18px black;
}

#left {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 200px;
    transform-origin: left top;
    transform: skewY(45deg);
    box-shadow: inset 45px -22px 80px -18px black;
}

<div id="top"></div>
<div id="left"></div>