How to create a responsive 4 div diamond? - html

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

Answer 2

EDIT: OK it can be done with CSS alone. Updated fiddle here:
http://jsfiddle.net/5CfNb/5/
Not sure if this can be done with CSS alone, but here's my solution using a few lines of jQuery. Depending on the aspect ratio though, it won't be a perfect 'diamond', so still needs some tweaking. But I hope this helps.
$('#main').height($(window).height());
$('#main').width($(window).width());
$(window).resize(function() {
$('#main').height($(window).height());
$('#main').width($(window).width());
});
http://jsfiddle.net/5CfNb/4/

Answer 3

This could also help you a bit: http://jsfiddle.net/maximgladkov/bJLYn/1/
#main {
position: absolute;
top: 50%;
left: 50%;
margin: -15% 0 0 -15%;
height: 0px;
width: 30%;
padding-top: 30%;
overflow: visible;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.box {
display: block;
width: 45%;
height: 45%;
position: absolute;
}
.blue {
background: blue;
top: 0;
left: 0;
}
.green {
background: green;
top: 0;
right: 0;
}
.red {
background: red;
bottom: 0;
right: 0;
}
.yellow {
background: #ffd54f;
bottom: 0;
left: 0;
}