JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div class="wrapper-top">
        <img src="http://fc01.deviantart.net/fs17/f/2007/129/7/4/Stock_032__by_enchanted_stock.jpg" />
    </div>
    <div class="wrapper-bot">
        <img src="http://indianapublicmedia.org/support/files/2011/09/04_03_1-Stock-Market-Prices_web.jpg" />
    </div>
    <div class="wrapper-top">
        <img src="http://fc01.deviantart.net/fs17/f/2007/129/7/4/Stock_032__by_enchanted_stock.jpg" />
    </div>
    <div class="wrapper-bot">
        <img src="http://indianapublicmedia.org/support/files/2011/09/04_03_1-Stock-Market-Prices_web.jpg" />
    </div>
    <div class="wrapper-top">
        <img src="http://fc01.deviantart.net/fs17/f/2007/129/7/4/Stock_032__by_enchanted_stock.jpg" />
    </div>
    <div class="wrapper-bot">
        <img src="http://indianapublicmedia.org/support/files/2011/09/04_03_1-Stock-Market-Prices_web.jpg" />
    </div>
    <div class="wrapper-top">
        <img src="http://fc01.deviantart.net/fs17/f/2007/129/7/4/Stock_032__by_enchanted_stock.jpg" />
    </div>
</div>

CSS

#content {
    background-color:#fff;
    width: 1000px;
}
.wrapper-top {
    position: absolute;
    width: 250px;
    height: 420px;
    display: inline-block;
    background-color:blue;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.wrapper-bot {
    position: relative;
    display: inline-block;
    width: 250px;
    height: 420px;
    top: 210px;
    left: 125px;
    background-color:red;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#content img {
    height: 420px;
    width: 250px;
}