Creating angled DIV for hero - html

Question

There's a lot of questions similar to this but they're for edges or have answers incompatible with some browsers. I'd thought of using a gradient image for the background but can achieve the same effect using a background gradient and I'd guess this may be easier to implement with minimal code.
I currently have this, which has flat edges;
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
}
<div class="top"></div>
<div class="main"></div>
It uses minimal code but I'd be aiming for an angled edge either on the bottom of one and on the top of the other or just the bottom of the top one so that the DIVs match up.
I'd be aiming for something like this…
Of course I could rotate the DIV but then there's overflow. I want something clean so that both DIVs match up. Something using clip-path: polygon could work but I can't figure out the angles or implementation. Any ideas or resources for where to start would be apprecited.
UPDATE
I've figured out how to angle both so that they match up but the DIVs need to be touching for it to look proper.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
}
<div class="top"></div>
<div class="main"></div>
UPDATE 1

Answer 1

Would this work? I added position: relative; and top: -150px; to move it up.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
top: -120px;
}
<div class="top"></div>
<div class="main"></div>