JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="container">
    <div class="left">
        <div class="bg"></div>
    </div>
    <div class="right">
        <div class="bg"></div>
    </div>
    <div class="bottom">
        <div class="bg"></div>
    </div>
</div>

CSS

.container{
    width:1000px;
    height:800px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.left, .right, .bottom {
    transition:linear 200ms;
    float:left;
    position:absolute;
    z-index:1;
    background:#FFF;
}
.left .bg, .right .bg, .bottom .bg {
    transition:linear 200ms;
    position:absolute;
}
.left {
    height:800px;
    width:800px;
    left:-300px;
    top:0;
    clip-path: polygon(0 0, 100% 0, 100% 560px, 300px 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 560px, 300px 100%, 0 100%);
}
.left .bg {
    width:798px;
    height:800px;
    left:0;
    top:0;
    background:url(https://www.firestock.ru/wp-content/uploads/2014/05/abstract-rings-background-700x524.jpg) no-repeat 0 0;
    background-size:cover;
    clip-path: polygon(0 0, 100% 0, 100% 558px, 300px 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 558px, 296px 100%, 0 100%);
}
.right {
    height:800px;
    width:800px;
    top:0;
    right:-299px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px);
}
.right .bg {
    width:798px;
    height:800px;
    right:0;
    top:0;
    background:url(https://www.firestock.ru/wp-content/uploads/2015/12/Dollarphotoclub-65301126-light-700x466.jpg) no-repeat 0 0;
    background-size:cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 504px 100%, 0 558px);
}
.bottom {
    height:540px;
    width:1000px;
    left:0;
    bottom:-298px;
    clip-path: polygon(0 100%, 0 240px, 50% 0, 100% 240px, 100% 100%);
    -webkit-clip-path: polygon(0 100%, 0 240px, 50% 0, 100% 240px, 100% 100%);
}
.bottom .bg {
    height:539px;
    width:100%;
    left:0;
    bottom:0;
    background:url(http://www.sunhome.ru/UsersGallery/wallpapers/233/goluboi-fon-oboi.jpg) no-repeat 0 0;
    background-size:cover;
    clip-path: polygon(0 100%, 0 242px,...