Question

我有两个具有线性渐变背景的倾斜div，应该完美排列，但它们之间留有1px的间隙。

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

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

Left has div moved 1px, right has transparent borders

有什么想法吗？

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更难管理，但没有那个问题

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

相邻的倾斜div在它们之间留下1px的间隙

1 个答案: