Poster image with triangle svg

by Alexey Zuev

HTML

<div class="container">
    <div class="poster">
        <img src="https://static.pexels.com/photos/6998/city-cityscape-amarpreet-kaur-large.jpg" alt="">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="triangle" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0 0 L0 100 L100 105 L100 0 L25 100 Z" />
        </svg>
    </div>
</div>

CSS

body {
    margin: 0;
    background: #fff;
}
.container {
    max-width: 825px;
    margin: auto;
}
.poster {
    position: relative;
    overflow: hidden;
}
.poster img {
    max-width: 100%;
    vertical-align: middle;
}
.triangle {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20%;
}
.triangle path {
    fill: #fff;
}