amansoni211 amansoni211 - 2 months ago 9
CSS Question

Reduce spacing between two clipped images

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

enter image description here

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

enter image description here



.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

Answer

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

Comments