JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sliders">
		<div class="slider"><div id="promo1">
        <div id="promo-link">
        <a href="#">TEST LINK</a>
        </div>
            <img src="https://unsplash.imgix.net/photo-1434139240289-56c519f77cb0?fit=crop&fm=jpg&h=700&q=75&w=1050" />
            </div>

        </div>
    </div>

CSS

#slider{
	position:relative;
	}

.div1, .div2 {
    min-height: 400px;
    background: #D25A1E;
    position: relative;
    width: calc(50% - 30px);
}
.div1 {
    float: left;
	background-image: url('https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050') !important;
	background-repeat: no-repeat;
	background-position: center center;	
	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
}
.div2 {
    float: right;
	background-image: url('https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050') !important;
	background-repeat: no-repeat;
	background-position: center center;	

	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
}
.div1:after, .div2:before {
    content:'';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.div1:after {
    left: 100%;
    border-top: 400px solid #D25A1E;
    border-right: 50px solid transparent;
}
.div2:before {
    right: 100%;
    border-bottom: 400px solid #D25A1E;
    border-left: 50px solid transparent;
}
#promo1{width:100%; position:relative;}
#promo1 img{width:100%;}
#promo-link{
	position: absolute;
	z-index: 100000;
	left: 25%;
	top: 50%;
	font-size: 30px;
	padding: 20px 40px;
	border: 2px solid #fff;
	}
#promo-link a{
	text-decoration:none;
	color:#fff;
	font-family:"Times New Roman", Times, serif	
	}