Image with slanted edge

by Bijoy Anupam

HTML

<!-- Browser Support for transform as per canisue.com is http://caniuse.com/#search=transform -->
<div class="tile slanted">
    <img src="http://i.ytimg.com/vi/yvcSsQ6rxgA/hqdefault.jpg" />
</div>
<div class="tile slanted">
    <img src="http://i.ytimg.com/vi/VtjSuNJGViE/hqdefault.jpg" />
</div>

CSS

.tile {
    float: left;
    margin-left: 5px;
}
.slanted {
    transform: skewX(20deg);
    width: 300px;
    overflow: hidden;
}
.slanted img {
    transform: skewX(-20deg);
    /* anti-alias the skewed edges */
    -webkit-backface-visibility: hidden;
    margin-left: -67px;
}