EDIT: I've a much clearer picture of what I want now. The original description of the question is no longer necessary, however could be read / frowned upon at your own leisure.
Long story short : This can be done with clip-path property( thanks to @alkshendra, who cleared my doubt), but that's not very well supported in the browsers yet. How can I do this in any other way ?
I have to make an image carouse like this
.
I've tried
But in both of the cases, there's an overlap which screws the click event on li (which has the image) of the carousel.
Image has to be contained within the li container and not go out of it, BUT at the same time retain its original vertical direction and not get skewed/tilted.


.carousel li {
width: 30%;
border: 1px solid black;
transform: skew(-10deg);
}
picture img {
transform: skew(10deg);
}
My Markup Mandates this structure :
<li class=" image">
<div class="ieadexa-panel">
<div class="media" aria-label="panel">
<picture class="lazy-load loaded"><!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="placeholdit.imgix.net/~text" media="screen and (min-width: 480px) and (max-width: 767px) and (orientation: portrait)">
<source srcset="placeholdit.imgix.net/~text" media="screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape)">
<source srcset="placeholdit.imgix.net/~text" media="screen and (min-width: 768px) and (max-width: 921px) and (orientation: portrait)">
<source srcset="placeholdit.imgix.net/~text" media="screen and (min-width: 768px) and (max-width: 921px) and (orientation: landscape)">
<source srcset="placeholdit.imgix.net/~text" media="screen and (min-width: 922px) and (max-width: 1023px)">
<source srcset="placeholdit.imgix.net/~text" media="screen and (min-width: 1024px)"><!--[if IE 9]></video><![endif]-->
<img class="" src="placeholdit.imgix.net/~text" title="sddf" alt="">
</picture>
</div>
<!-- stuff that is not necessary for the question -->
<div class="panel-overlay bottom-left" aria-haspopup="true">
<div class="text">
<h3>Lorem Ipsum is simply dummy text of the printing.</h3>
<p class="text-small">Why we need it ?</p>
</div>
<p class="animate-header-button">
<a target="_self" href="/content/engagednow/en_us/contact-us.html" class="btn btn-info btn-iea">Know more</a>
<a target="_blank" href="/content/engagednow/en_us/solutions/traveler.html" class="btn btn-info btn-iea link">Later sometime</a>
</p>
</div>
</div>
</li>
A little help anyone?
Have you got a jsfiddle or somewhere to play around in? Would be greatly appreciated, and would make it easier for people to help :) Also, screen shots of what you're seeing could be useful.
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-pathand 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
imgelement but you can easily modify it to suit your markup.hope it helps! 🙂