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

1. Clip Masking
2. stackoverflow.com/questions/31526008/parallelogra…

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?

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

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%);
    }
}