How to create a responsive 4 div diamond?

Question

I am working on a project where I have a div diamond of pictures that needs to be responsive.

The picture below shows the diamond in div I have created, but it doesn't work in all sizes. I want the diamond to react responsively to the browser size, so it always fits.

I have a jsFiddle, but it is not responsive. Just to show what I want, and I have been trying to create.

<div id="page">
<div id="main">
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
</div>
</div>

#page {
    width:100%;
    height:100%;
    min-height:500px;
    min-width:500px;
}
#main {
    height:80px;
    width:80px;
    position:relative;
    display:block;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.box {
    display: inline-block;
    height:35%;
    width:35%;
    margin-right:5%;
    margin-top:5%;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}
.red {
    background-color:red;
}
.yellow {
    background-color:#ffd54f;
}

Any help is very much appreciated :-)

Answer 1

Start with a responsive base:

#main {
    width: 35%;
    height: 0;
    position: relative;
    padding-bottom: 35%;
    border: solid 1px black;
    margin: auto;
}

The trick is to set the vertical dimension as padding percentage, that is calculated on the width of the parent. (So it is always a square)

Now set the diamonds, translated as percentages.

.box {
    height:100%;
    width:100%;
    position: absolute;
}
.blue {
    background-color:blue;
    -webkit-transform: translate(-75%, 100%) rotate(45deg);
}
.green {
    background-color:green;
    -webkit-transform: translate(0, 25%) rotate(45deg);
}
.red {
    background-color:red;
    -webkit-transform: translate(75%, 100%) rotate(45deg);
}
.yellow {
    background-color:#ffd54f;
    -webkit-transform: translate(0, 175%) rotate(45deg);
}

fiddle