Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
.div-one {
background:red;
width: 100vw;
height: 100vh;
background: url('http://devanswer.com/codes/files/background-1.jpg');
width: 100vw;
height: 100vh;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.div-two {
-webkit-clip-path: polygon(100vw 0, 0% 100%, 100vw 100vh);
clip-path: polygon(100vw 0, 0% 100vh, 100vw 100vh);
background: url('http://devanswer.com/codes/files/background-2.jpg');
width: 100vw;
height: 100vh;
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
}
body {
margin: 0;
}
div {
position: absolute;
}
/* Decoration */
.overlay {
width: 100vw;
height: 100vh;
background: rgba( 0, 0, 0, 0.3)
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
text-align: center; color: rgba(250, 250, 250, 0.8);
border: 4px double rgba(250, 250, 250, 0.2)
}
.box h1 {
font-size: 11vh;
padding: 0 1em;
font-family: Quicksand;
}
</style>
</head>
<body>
<div class="div-one"></div>
<div class="div-two"></div>
<div class="overlay"></div>
<div class="box">
<h1>Responsive Triangle Background Images</h1>
</div>
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>
