如何消除两个倾斜图像之间的白色间隙？答案

【问题标题】：How to remove white gap between two skewed images?如何消除两个倾斜图像之间的白色间隙？
【发布时间】：2018-10-11 12:45:19
【问题描述】：

我想将一张图像的两个部分连接成一个原始图像，其中每个部分都应该是一个三角形。

我找到了codepen，其中有两个带有嵌套图像的元素，我删除了边距，但元素之间有一个难看的白色边框（间隙）。

我怎样才能删除这个？

<div class='pageOption'>
  <a href='#' class='option' data-inf='photo'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>
  </a>
  <a href='#' class='option' data-inf='cinema'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>
  </a>
</div>

body { background: gainsboro; }
.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
/*   left: -.25em; */
  transform-origin: 100% 0;
}
.option:last-child {
/*   right: -.25em; */
  transform-origin: 0 100%;
}
.option img { opacity: 1; transition: .5s; }
.option img:hover { opacity: 1; }
.option img, .option:after {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}
.option:after {
  position: absolute;
  margin: .5em 1.65em;
  color: white;
  font: 500 1.25em Courier;
  letter-spacing: .1em;
  text-transform: uppercase;
  content: attr(data-inf);
}
.option:first-child:after { top: 0; left: 0; }
.option:last-child:after { right: 0; bottom: 0; }

【问题讨论】：

@NanditaAroraSharma 没有帮助，它只是隐藏元素
如果您在示例中将 left 和 right 设置为 0，您将得到无间隙，但轻微的白色伪影（至少在 Mac 上）是不透明度显示背景颜色的结果，如果您将主体设置为黑色，它看起来没有间隙：codepen.io/NeilWkz/pen/yjMrMZ
向右移动.option:last-child 1px 消除了间隙codepen.io/anon/pen/ervoxN
@NeilWkz 它绝对不那么明显，但对于一张图像来说仍然不是理想的解决方案
@Taki 您的解决方案与下面建议的 Nandita Arora Sharma 非常相似，但是在移出角落时存在相同的问题image

标签： css css-shapes

【解决方案1】：

改变这些样式

.option:first-child {
  left: 0.1em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: 0;
  transform-origin: 0 100%;
}

【讨论】：

向左移动一点，将允许右侧部分显示在左下角，通过在右侧应用margin-left: 1px 想到类似的东西，但你会遇到同样的问题。