Divide the diagonal div into 3 divs

Question

Trying to achieve something as the image suggests, and not sure what the best approach would be, because I want to play with divs heights when paired.

The container container should be 100% wide, 100% high and the div inside fully responsive.

Borders, pseudo or backgrounds will not 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 jsfiddle you will find both rotating and oblique comments.

Answer 1

	.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>

Run codeHide result

You can also use linear gradient.

Answer 2

Hope this works for you.

CSS, . Area of ​​Traingle . width: 300px;height:600px; parent DIV, . , . SCSS CSS, . , calc, CSS.

.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 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>

Hide result

SCSS, .

.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 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);
  }
}

:

Answer 3

border:

#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>

Hide result

CSS : CSS