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

Question

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

我发现了一个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; }

Answer 1

更改这些样式

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

Answer 2

您可以通过仅保留一个倾斜元素并使用背景图像作为另一个元素来做到这一点。如果要将其用作链接，则可以保留第二个a元素。

body {
  background: gainsboro;
}

.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 40em;
  height: 27em;
  background: url(https://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg) center/100% 100% no-repeat;
}

.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 {
  bottom: 0;
  right: 0;
}

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

  </a>
</div>