.container {
height: 500px;
width: 500px;
position: relative;
background: black;
}
.box {
transform: skewX(20deg);
width: 33%;
height: 100%;
position: absolute;
}
.first-box {
background: purple;
left: 0;
}
.second-box {
background: green;
left: 33%;
}
.third-box {
background: orange;
left: 66%;
}<div class="container">
<div class="box first-box"></div>
<div class="box second-box"></div>
<div class="box third-box"></div>
</div>Jsfiddle: http://jsfiddle.net/jksqc1ux/7/
With the skew transformation, the parent's background is still partially visible. If the goal is to fill the entire parent with these boxes regardless of its dimensions, is there a formula that can be applied to achieve this? Considering all three boxes are equal in size.
An example calculation could be something like
.first-box {left: calc(33% * 0.4)}