相邻倾斜的div之间留下1像素的间隙。

Question

我有两个带有线性渐变背景的倾斜div，它们应该完美地对齐，但它们之间留下了1像素的间隙。

这个fiddle演示了问题：https://jsfiddle.net/jesperryom/rn1ncd5u/

我看到了两个建议的解决方案（将一个div移动1像素来补偿，或者给它们一个透明边框），但是当div的背景颜色是线性渐变时，这些解决方案似乎都不起作用，就像这张图片所示：

左侧是移动了1像素的div，右侧是透明边框

有什么想法吗？

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);
}

- Jesper RJ

---

我看到问题是由于转换元素的呈现方式引起的，所以我尝试使用clip-path代替，但它产生了相同的问题：https://jsfiddle.net/jesperryom/1jLdz8y5/ - Jesper RJ

Answer 1

Box shadow（盒子阴影）更难管理，但不会有那个问题。

#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>

- vals