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

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 一个负的 margin-right 要么给 .element2 一个负的 margin-left

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

Answer 3

您需要将 css 剪辑路径属性应用于环绕元素。那么这些环绕元素将被绝对定位，一个在左边，一个在右边。这些换行元素都在一个容器内，容器的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;
}

我对你的 fiddle 进行了更改，请看一下： https://jsfiddle.net/iamgutz/tfqdksnn/

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

Reduce spacing between two clipped images

html

css

clip-path