Set a leaning separation between two divs - html

Question

i'm currently trying to create a landing page for a mobile website, and I want two main divs with an image on it. (In my example there are colors). Here is my HTML :
<ion-content>
<div class="upperblock"></div>
<div class="downblock"></div>
</ion-content>
My CSS :
.upperblock{
width: 100%;
height: 50%;
background-color: #2ec95c;
}
.downblock{
width: 100%;
height: 50%;
background: #000;
}
I would like to have a "leaning" separation, something like that (the screenshot of my result, and the red line is where I'd like the separation to be ):
Thank you in advance for any help, couldn't find anything about this !

Answer 1

.container {
position: relative;
overflow: hidden;
background-color: #2ec95c;
}
.upperblock {
width: 100%;
height: 200px;
background-color: #2ec95c;
color: #000;
}
.downblock {
width: 100%;
height: 200px;
background-color: #000;
color: #FFF;
}
.block {
transform: skewY(-6deg);
padding: 50px;
margin: -5% 0;
}
.block * {
transform: skewY(6deg);
}
<div class="container">
<div class="block upperblock">
<h2>content</h2>
</div>
<div class="block downblock">
<h2>content</h2>
</div>
</div>

Answer 2

You may want to add another div down below each div (I think :after should do the trick here) and then turn it with transform: rotate(15deg). This will turn the div.
Important note: Content in the turned box will be also turned. So you may want to seperate the content and background div.
Other way would be to create a svg image. SVG will scale perfectly and the code will look way cleaner ;)

Answer 3

You can also use pseudo-elements to achieve that
body {
margin: 0;
width: 100vw;
height: 100vh;
}
.upperblock {
width: 100%;
height: 50%;
background-color: #2ec95c;
position: relative;
}
.downblock {
width: 100%;
height: 50%;
background: #000;
position: relative;
}
.downblock::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: inherit;
position: absolute;
top: 0;
transform: skewY(-5deg) translateY(-65%);
}
<div class="upperblock"></div>
<div class="downblock"></div>

Answer 4

You can append a block to the upperblock div using CSS and rotate that using transform. You'll need to play with the heights depending on your content but this will expand and be responsive.
.outer {
overflow: hidden;
}
.upperblock{
width: 100%;
min-height: 40vh;
background-color: #2ec95c;
position: relative;
}
.upperblock::after {
content: "";
display: block;
height: 120px;
background: #2ec95c;
width: calc(100% + 50px);
position: absolute;
bottom: -60px;
transform: rotate(7deg);
}
.downblock{
width: 100%;
min-height: 60vh;
background: #000;
}
<div class="outer">
<div class="upperblock"></div>
<div class="downblock"></div>
</div>