Two divs with slanted borders

Two divs next to each other with background image and slanted border. Purely CSS.

by dzul1983

HTML

<div class="image-group slanted-borders">
    <div class="image-bg-wrapper left">
        <div class="image-bg">
            <h1>Lorem ipsum dolor sit amet</h1>
        </div>
    </div>
    <div class="image-bg-wrapper right">
        <div class="image-bg">
            <h1>Lorem ipsum dolor sit amet</h1>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.image-group {
    height: 400px;
    overflow: hidden;
    position: relative;
}

.image-bg-wrapper {
    display: inline-block;
    width: 55%;
    color: #fff;
    overflow: hidden;
}

.image-bg-wrapper + .image-bg-wrapper {
    margin-left: -75px;
}

.image-bg-wrapper.right {
    transform: skew(-20deg);
    position: absolute;
}

.image-bg {
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    padding: 20px;
    
}

.left .image-bg {
    background-image:url('http://7-themes.com/data_images/out/60/6977831-dota-2-wallpapers.jpg');
    
}

.right .image-bg {
    background-image:url('http://cdn.desktopwallpapers4.me/wallpapers/games/1920x1200/3/21594-dota-2-characters-1920x1200-game-wallpaper.jpg');
    transform: skew(20deg);
    position: relative;
    right: 70px;
}

.right h1 {
    text-align: right;
}