缩小两个剪切图像之间的间距 [英] Reduce spacing between two clipped images

问题描述

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

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

请帮助！感谢

解决方案

只需添加

  margin-right：-50px; 
  

到.element

你给一个负边距 - 右边的.element或给一个负边距 - .element2

I am using clip-path to clip two images. The result is

Everything is fine but I want to reduce the spacing between these images just like this

.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

Please help! Thanks

解决方案

just add

 margin-right: -50px;

to .element

more explanation : you an either give a negative margin-right to .element or give a negative margin-left to .element2

这篇关于缩小两个剪切图像之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！