I am working on a project where I have 4 divs serving as background colors. I want to create slanted bottom borders similar to the design in this image:
Below is the code I currently have:
<html>
<head>
<style>
html, body { height: 200%; padding: 0; margin: 0; }
#first {
top: 0;
background-color: orange;
height: 50%;
}
#second {
bottom: 0;
background-color: green;
height: 50%;
}
#third {
top: 0;
background-color: blue;
height: 50%;
}
#fourth {
bottom: 0;
background-color: red;
height: 50%;
}
</style>
</head>
<body>
<div id="first"> </div>
<div id="second"> </div>
<div id="third"> </div>
<div id="fourth"> </div>
</body>
</html>