How to make 2 side by side divs with slanted middle [duplicate] - html

Question

This question already has an answer here:
two divs split with diagonal line - CSS
(1 answer)
Closed 2 years ago.
Please help in making 2 divs side-by-side (50% each) that covers the entire width of the page and that the middle is slanted/skewed (please see attached photo). I have seen a few examples of skewed divs and have had no luck trying to make it work for my needs - especially when changing the size of the browser window.
Thanks in advance for all your help.
.slantContainer{
display:flex;
flex-flow:row;
height: 300px;
}
.slantedShare{
background-color: #6179ff;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
}
.slantedShare::after {
background: #6179ff;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
transform-origin: bottom left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
.slantedDonate{
background-color: #7b24f1;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
}
.slantedDonate::after{
background: #7b24f1;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
transform-origin: top left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
<div>
<div class="slantContainer">
<div class="slantedShare">
container for left div
</div>
<div class="slantedDonate">
container for right div
</div>
</div>
</div>
<table style="width:100%;">
<tr style="width:100%;">
<td style="width:50%;">
<div class="slantedShare">
Left Div inside Table
</div>
</td>
<td style="width:50%;">
<div class="slantedDonate">
right div inside table
</div>
</td>
</tr>
</table>

Answer 1

If you play with the z-index it works
.slantContainer{
display:flex;
flex-flow:row;
height: 300px;
}
.slantedShare{
background-color: #6179ff;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
}
.slantedShare::after {
background: #6179ff;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
transform-origin: bottom left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
.slantedDonate{
background-color: #7b24f1;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
z-index: 1;
}
.slantedDonate::before {
background: #7b24f1;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
transform-origin: top left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
<div>
<div class="slantContainer">
<div class="slantedShare">
container for left div
</div>
<div class="slantedDonate">
container for right div
</div>
</div>
</div>
<table style="width:100%;">
<tr style="width:100%;">
<td style="width:50%;">
<div class="slantedShare">
Left Div inside Table
</div>
</td>
<td style="width:50%;">
<div class="slantedDonate">
right div inside table
</div>
</td>
</tr>
</table>

Answer 2

This can be done with a single div:
.slnt {
width: 50%;
min-width: 60vh;
height: calc(50vh / 2);
min-height: 20vw;
background-color: dodgerblue;
}
.slnt::before,
.slnt::after {
content: "";
display: inline-block;
height: 100%;
}
.slnt::before {
background-color: dodgerblue;
transform: skew(-20deg);
margin-right: -30px;
position: relative;
left: 8%;
width: 40%;
z-index: 1;
}
.slnt::after {
background-color: indigo;
width: 60%;
position:relative;
right: -31px;
}
<div class="slnt"></div>