Diagonally divs filling complete space of parent div - html

Question

I'm trying to create a div with relative height and width, in which are three boxes, being diagonally aligned and also fill the complete space of the relative parent div.
It's kinda tough for me to explain, so here's a picture on how I mean it: http://i.imgur.com/s2uSTVU.png
Besides the little space between the red lines all the space should be covered by the diagonal boxes.
Is that possible somehow? I'm very grateful for every advice or tip someone can shoot me!
Following code is what I got so far. The problem now where I'm stuck is how to make the diagonal divs fill out the complete space around them.
<div class="parent">
<div class="box-1">box1</div>
<div class="box-2">box2</div>
<div class="box-3">box3</div>
</div>
CSS:
.box-1 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-2 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-3 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
height: 33.33%; }
Greetings, Toumazi!

Answer 1

You could try that: fiddle
.parent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.parent > div {
background: #c1c1c1;
}
.box-1 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-2 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-3 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
height: 33.33%; }