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>
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
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>
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/
来源:https://stackoverflow.com/questions/39647106/reduce-spacing-between-two-clipped-images