Neighboring skewed divs leave 1px gap between them - html

Question

I have two skewed divs with linear gradient backgrounds, which should be lining up perfectly, yet they leave a 1px gap between them.
This fiddle demonstrates the problem: https://jsfiddle.net/jesperryom/rn1ncd5u/
I have seen two suggested solutions (moving one div 1px to compensate, or giving them a transparent border), but none of those seem to work when the background color of the divs is a linear gradient as this image shows:
Left has div moved 1px, right has transparent borders
Any ideas?
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

Box shadow are way harder to manage, but don't have that problem
#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>