减少两个剪裁图像之间的间距

Question

我正在使用剪辑路径剪辑两张图片。结果是

一切都很好但我想减少这些图像之间的间距就像这样

.clip-wrap {
  display: inline;
}
.element {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
}
.element2 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}

<div class="clip-wrap">
  <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element" width="150" height="150">
</div>
<div class="clip-wrap">
  <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element2" width="150" height="150">
</div>

JsFiddle Link

请帮忙！感谢

Answer 1

只需添加

 margin-right: -50px;

到.element

更多解释： 你要么给予.element一个负边际权利，要么给一个负余量 - 留给.element2

Answer 2

图像之间的距离由容器决定，而不是图像本身。

如果第二个容器的边距为负，则可以将其移近第一个图像。

＆＃13;

＆＃13;

.clip-wrap {
  display: inline-block;
  border: 1px solid black;
}
.clip-wrap:nth-child(2) {
  margin-left: -50px;
}
.element {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
}
.element2 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}

＆＃13;

<div class="clip-wrap">
  <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element" width="150" height="150">
</div>
<div class="clip-wrap">
  <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element2" width="150" height="150">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要将css clip-paths属性应用于wrap元素。然后，这些包装元素将被定位为绝对，一个位于左侧，一个位于右侧。 这些包装元素位于容器内，容器的with确定包装元素之间的间距。

.clips-container {
  position: relative;
  width: 50%;
}
.clip-wrap {
  display: inline-block;
  position: absolute;
}
.clip-wrap1 {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  left: 0;
}

.clip-wrap2 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  right: 0;
}

我改变了你的小提琴，看一看： https://jsfiddle.net/iamgutz/tfqdksnn/