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

Question

我正在使用 clip-path 来剪辑两个图像。结果是

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

.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