JSFiddle - React, Tailwind, and code Playground

HTML

<div class="active item wrap">
    <img src="http://s11.postimg.org/4yswkaeqr/image1.jpg" alt="image1" style="width: 100%;" />
</div>
<div>
    <img src="http://deleleasing.dk/wp-content/uploads/Highway_401_by_401-DVP-1024x683.jpg" style="visibility: visible; margin-top: -305px;" />
</div>

CSS

.wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height:250px;
    margin: 0 auto;
    background-color:#B2C2CC;
}
.wrap img {
    width: 100%;
    height: auto;
    display: block;
}
.wrap:before, .wrap:after {
    content:'';
    position: absolute;
    bottom: 0;
    width: 50%;
    background-color: inherit;
    padding-bottom:3%;
}
.wrap:before {
    right: 50%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -ms-transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);
}
.wrap:after {
    left: 50%;
    -ms-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
}