我有两个带有线性渐变背景的倾斜div,它们应该完美地对齐,但它们之间留下了1像素的间隙。
这个fiddle演示了问题:https://jsfiddle.net/jesperryom/rn1ncd5u/
我看到了两个建议的解决方案(将一个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);
}