Poster image with triangle border

by Alexey Zuev

HTML

<div class="container">
    <div class="poster">
        <img src="https://static.pexels.com/photos/7105/coffee-iphone-laptop-notebook-large.jpg" alt="">
    </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;
}

.poster:before,
.poster:after {
    content: "";
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    transform-origin: 0 100% 0;
}
.poster:before {
    left: 0;
    right: 70%;
    transform: translateY(.45px) skewX(60deg);
}
.poster:after {
    left: 30%;
    right: 0;
    transform: translateY(.45px) skewX(-80deg);
}