Skewed containers for images in CSS - image

Question

So I want to make a row of images that are inside skewed containers. Please see the image to fully understand:
The best I've gotten so far is skewing the container around an image, but there are 2 problems with this: the image inside becomes skewed and there are gaps on the far left and the far right.
HTML:
<section>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
</section>
What I have so far:
CSS:
html, body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
width: 20%;
height: 100px;
transform: skew(-5deg);
img {
width: 100%;
height: 140px;
}
}
http://codepen.io/mildrenben/pen/oXjzrK

Answer 1

There is a way to do this pretty nicely with clip-path but the problem is this isn't very well supported at the moment. See more on that here and learn more about clip-path here.
Here is an example:
html, body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
width: 30%;
height: 100px;
-webkit-clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
margin-left: -3%;
}
.image-wrap:last-child {
-webkit-clip-path: none;
clip-path: none;
}
img {
width: 100%;
height: 140px;
}
<section>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
</section>

Answer 2

One possible solution (but not really really elegant) would be to skew the parent container in one direction, and then the children to the opposite direction. In the same time, if you could set those images as bg images would be better because you'd have a greater control over background size.
The downsizes for this approach would be:
setting background images as inline styles (if they are dynamic);
you need to calculate the exact percentage needed to pull child image to left/right so you could fill the entire space created by the skew's transformation angle (I've set it to 5%, just for demo purposes).
To sum up, it's your choice if you could integrate this into your app.
html,
body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
border: 1px solid blue;
width: 20%;
height: 120px;
transform: skew(-5deg);
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
.image-wrap img,
.image-wrap .thumb {
transform: skew(5deg);
position: absolute;
right: -5%;
left: -5%;
top: 0;
bottom: 0;
}
<section>
<div class="image-wrap">
<div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
</div>
</section>
I know it's not the cleanest solution but this is what I came up on the moment.

Answer 3

Based on your example you can make it something like this. Just play with the .image-wrap height to achieve perfect balance between the image and the wrap :)
*{
margin: 0;
}
html, body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
width: 20%;
height: 250px;
-webkit-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
overflow: hidden;
}
.image-wrap img {
width: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
<section>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
</section>