Reduce spacing between two clipped images

夙愿已清 提交于 2019-12-01 08:12:57

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

The distance between the images is determined by their containers, not the images themselves.

With a negative margin on the second container, you can shift it closer to the first image.

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

You need to apply the css clip-paths properties to the wrap elements. Then those wrap elements will be positioned absolute, one to the left and one to the right. Those wrap elements are inside a container, and the with of the container determines the spacing between the wrap elements.

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

I made changes to your fiddle, take a look: https://jsfiddle.net/iamgutz/tfqdksnn/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!