Split diagonally div in 3 divs - html

Question

Trying to achieve something as the image suggests, and not sure what would be the best approach because I want to play with the divs heights when hovering.
The container div must be 100% width, 100% height and the divs inside fully responsive.
Borders, pseudos or background wont work for this particular case.
html
<div class="container">
<div class="top"></div>
<div class="center">
<p>text text</p>
</div>
<div class="bottom"></div>
</div>
css
.container{
width: 100%;
height: 100vh;
overflow: hidden;
// transform: skewY(-45deg);
// transform: rotate(-45deg);
}
.top, .bottom {
width: 100%;
height: calc(50% - 20px);
}
.top {
background: black;
}
.bottom {
background: grey;
}
.center {
background: green;
height: 40px;
width: 100%;
}
p {
color: white;
line-height: 10px;
text-align: center;
}
In the jsfiddle you will find both rotate and skewY commented.

Answer 1

Hope it works for you.
If want pure CSS solution, you can try this.
It uses Area of Traingle and all other calculations.
I have given width: 300px;height:600px; to parent DIV and then done the calculations. You may need to change accordingly.
I use SCSS for writing my CSS, so its easy for me. Though I have tried to do more of calculation using calc to make it more CSS friendly.
.parent {
position: relative;
width: 300px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 600px;
/* Not relevant. this was used to show a Guide-point of intersection of one of triangle's side.
&:before {
content: '';
width: 2px;
height: 2px;
background: #000;
position: absolute;
left: calc(50% - 1px);
top: -1px;
display: block;
}
&:after {
content: '';
width: 2px;
height: 2px;
background: #000;
position: absolute;
left: calc(50% - 1px);
bottom: -1px;
display: block;
}
*/
}
.child {
min-height: 20px;
padding: 15px;
transform: skewY(-30deg);
transition: all 0.2s ease;
display: flex;
align-content: center;
align-items: center;
}
.child:hover {
height: calc(100% - 40px);
}
.child:hover~.child {
height: 20px;
}
.child__inner {
transform: skewY(30deg);
color: #fff;
}
.child--top {
background: tomato;
height: calc(50% - 20px);
margin-top: calc((150px / 1.73)* -1);
padding-top: calc((150px / 1.73) * 2);
}
.child--middle {
background: DeepSkyBlue;
}
.child--bottom {
background: MediumSeaGreen;
height: calc(50% - 20px);
margin-bottom: calc((150px / 1.73)* -1);
padding-bottom: calc((150px / 1.73) * 2);
}
<div class="parent">
<div class="child child--top">
<div class="child__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, accusantium. Illo minima ipsa, at dignissimos perspiciatis nesciunt. Hic quae porro assumenda possimus fugit, velit eaque magni, reiciendis veritatis perspiciatis recusandae?
</div>
</div>
<div class="child child--middle">
<div class="child__inner">
</div>
</div>
<div class="child child--bottom">
<div class="child__inner">
</div>
</div>
</div>
If you want to check the SCSS, below is the code.
.parent {
position: relative;
width: 300px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 600px;
/* Not relevant. this was used to show a Guide-point of intersection of one of triangle's side.
&:before {
content: '';
width: 2px;
height: 2px;
background: #000;
position: absolute;
left: calc(50% - 1px);
top: -1px;
display: block;
}
&:after {
content: '';
width: 2px;
height: 2px;
background: #000;
position: absolute;
left: calc(50% - 1px);
bottom: -1px;
display: block;
}
*/
}
.child {
min-height: 20px;
padding: 15px;
transform: skewY(-30deg);
transition: all 0.2s ease;
display: flex;
align-content: center;
align-items: center;
&:hover {
height: calc(100% - 40px);
}
&:hover ~ .child {
height: 20px;
}
&__inner {
transform: skewY(30deg);
color: #fff;
}
&--top {
background: tomato;
height: calc(50% - 20px);
margin-top: calc((150px / 1.73)* -1);
padding-top: calc((150px / 1.73) * 2);
}
&--middle {
background: DeepSkyBlue;
}
&--bottom {
background: MediumSeaGreen;
height: calc(50% - 20px);
margin-bottom: calc((150px / 1.73)* -1);
padding-bottom: calc((150px / 1.73) * 2);
}
}
Reference: Area of Traingle and Sides height/width

Answer 2

.gradient{ width: 250px; height: 500px;
background: -webkit-linear-gradient(-45deg, #000 0% , #000 45%, #53ff00 45%, #53ff00 50%, #7e7e7e 50%, #7e7e7e 100%);
background: -moz-linear-gradient(-45deg, #000 0% , #000 45%, #53ff00 45%, #53ff00 50%, #7e7e7e 50%, #7e7e7e 100%);
background: linear-gradient(-45deg, #000 0% , #000 45%, #53ff00 45%, #53ff00 50%, #7e7e7e 50%, #7e7e7e 100%);
}
<div class="gradient"></div>
You can also use linear gradient

Answer 3

Its so easy use border style:
#id1 {
background-color: #53ff00;
position: relative;
width:100px;
}
#id2 {
width: 0;
height: 0;
border-top: 100px solid #000;
border-right: 100px solid transparent;
}
#id3 {
width: 0;
height: 0;
border-bottom: 100px solid #969696;
border-left: 100px solid transparent;
margin-top:-65px
}
#top{
height: 50px;
background-color: #000;
width:100px;
}
#bottom{
height: 50px;
background-color: #969696;
margin-top: -4px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="id1">
<div id="id2"></div>
<div id="id3"></div>
</div>
<div id="bottom"></div>
complete shape of CSS this link : The Shapes of CSS