How to create a responsive diamond 4 div?

Question

I am working on a project where I have a diamond div that should be responsive.

The image below shows the diamond in the div that I created, but it does not work in all sizes. I want the diamond to respond to browser size, so it always fits.

I have jsFiddle , but it does not respond. Just to show what I want and I tried 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 much appreciated :-)

Answer 1

Start with a sensitive 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 a percent fill, which is calculated by the width of the parent element. (So ​​it's 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 this can only be done using CSS. Updated fiddle here: http://jsfiddle.net/5CfNb/5/

Not sure if this can only be done with CSS, but here my solution uses a few jQuery lines. However, depending on the aspect ratio, it will not be an ideal “diamond”, so it still needs to be adjusted a little. 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

It may also help you: 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; }