Fitting Diagonal Divs to create a perfect X on page - html

Question

I need a little help with fitting these diagonal divs to page to create a perfect X that I can then click on to bring either side of the X to the foreground through a js onclick to z-index change. I have all that covered but I've never dealt with diagonal div's and can't seem to make them fit to page properly to form a perfect X without getting a scroll bar:
.x1 {
background-color: #2cb5e8;
opacity: 0.4;
transform: skewY(-145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1002;
}
.x1>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145eg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.x2 {
background-color: #0fb8ad;
opacity: 0.4;
transform: skewY(145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1001;
}
.x2>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145deg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.page {
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
}
<div class="page">
<div class="x1">
<div class="wrapper">
<br>
</div>
</div>
<div class="x2">
<div class="wrapper2">
<br>
</div>
</div>
</div>

Answer 1

Since you are dealing with javascript. You can simply get the distance of the box from the top of the container .page and add a padding-top to .page container itself.
Get the dimension of one of the bar example bar with class .x1
Compute the top position of .x1 and padding the parent to shift down its contents
Snippet below
document.getElementsByClassName("page")[0].style.paddingTop=-(document.getElementsByClassName("x1")[0].getBoundingClientRect().top)+"px";
.x1 {
background-color: #2cb5e8;
/*opacity: 0.4;*/
transform: skewY(-145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1002;
}
.x1>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145eg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.x2 {
background-color: #0fb8ad;
/*opacity: 0.4;*/
transform: skewY(145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1001;
}
.x2>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145deg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.page {
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
}
<div class="page">
<div class="x1">
<div class="wrapper">
<br>
</div>
</div>
<div class="x2">
<div class="wrapper2">
<br>
</div>
</div>
</div>