减少两个剪辑图像之间的间距答案

【问题标题】：Reduce spacing between two clipped images减少两个剪辑图像之间的间距
【发布时间】：2017-01-31 12:10:48
【问题描述】：

我正在使用剪辑路径来剪辑两个图像。结果是

一切都很好，但我想像这样缩小这些图像之间的间距

.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

请帮忙！谢谢

【问题讨论】：

您是否尝试过在第二个元素上使用否定的margin-left？
大约 50px 应该可以解决问题。 jsfiddle.net/vd5ezk7z/2
请注意，问题中的代码在 IE11、Edge 或 FF 中不起作用。它适用于 Chrome。（未测试 Safari。）
在 iPad 上测试。它也适用于 Safari。

标签： html css clip-path

【解决方案1】：

添加

 margin-right: -50px;

到.元素

更多解释：你要么给 .element 一个负的 margin-right 或者给一个负的 margin-left 给 .element2

【讨论】：

【解决方案2】：

图像之间的距离取决于它们的容器，而不是图像本身。

使用第二个容器的负边距，您可以将其移近第一个图像。

.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%);
}

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

【讨论】：

【解决方案3】：

您需要将 css 剪辑路径属性应用于 wrap 元素。然后这些包装元素将被绝对定位，一个在左边，一个在右边。那些 wrap 元素在一个容器内，容器的 with 决定了 wrap 元素之间的间距。

.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/

【讨论】：