Not sure how you were approaching it but Clip Masking does solve the problem without causing any overlap.
Here's what I did using clip-path and a negative margin:
markup
<ul>
<li><a href="#1"><img src="img.png" /></a></li>
<li><a href="#1"><img src="img.png" /></a></li>
<li><a href="#1"><img src="img.png" /></a></li>
</ul>
CSS (LESS)
li {
display: inline-block;
float: left;
margin-left: calc(~"-150px * 0.15");
a {
-webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}
}
Here's the codepen demo: codepen.io/alkshendra/pen/zKLkdE?editors=1100
I've used anchor tags to wrap the img element but you can easily modify it to suit your markup.
hope it helps! 🙂
Okay I've tried what I'm trying to claim, let me try and get back to you