Adaptive diamond mesh

Question

I have a selection of squares (squares rotated 45 ° to look like diamonds) that I want to use to form a large diamond shape with a central red diamond.

I'm having trouble organizing the diamonds themselves, and href seems to be failing.

• How to position reactive diamonds in a regular grid ?

Its my code :

 body { background: black; color: #000000; font: 13px georgia, serif; line-height: 1.4; font-weight: lighter; text-rendering: optimizelegibility; } #diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: white; position: relative; top: -50px; } #diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: white; } #diamond_red { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #AA1C08; position: relative; top: -50px; } #diamond_red:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: #AA1C08; } 

 <a class="navigation"> <center> <div id="diamond"></div> <div id="diamond"></div> <div id="diamond" href="/photos/"></div> <div id="diamond_red"></div> <div id="diamond" href="/projects/"></div> <div id="diamond"></div> <div id="diamond"></div> <div id="diamond" href="/archive/"></div> </center> </a> 

Answer 1

Jet grid of diamons:

I do not think that you have the right approach to achieving a regular flexible layout of diamonds . It would be much simpler:

• create a responsive grid of squares (3x3 or any grid that you like)
• then rotate the grid 45 degrees.

This way you do not have to bother with borders, pseudo-elements ( :after ,: :before ) and the positioning of each diamond.

Here is a responsive example

It uses percentage width and bottom to support diamonds matching and transform:rotate(45deg); to rotate the entire grid and make it look like a diamond grid:

 body{background:#000;} #big_diamond { width: 50%; margin:15% auto; overflow:hidden; transform: rotate(45deg); } .diamond { position: relative; float: left; width: 31.33%; padding-bottom: 31.33%; margin: 1%; background: #fff; transition:background-color .4s; } .diamond a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #red{background-color: #AA1C08;} .diamond:hover, #red:hover{background-color:darkorange;} 

 <div id="big_diamond"> <div class="diamond"><a href="https://twitter.com/"></a></div> <div class="diamond"><a href="https://twitter.com/"></a></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond" id="red"><a href="https://twitter.com/"></a></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> </div> 

As other people have noted, there are some errors in your HTML that I fixed: Ids must be unique, and href cannot be used in a div.

Answer 2

You will need to clarify / clear your first question.

First, you use the diamond ID many times. Identifiers must be unique and used for a single item. You should use classes, not identifiers, for this.

Secondly, you cannot use href in div tags. You can wrap divs in a tags as follows:

 <a href="http://twitter.com/"><div class="diamond"></div></a> 

Or, better yet, so that the entire shape is clicked, you can put a inside the div and make the element level element of a equal to 100% width and height:

<div class="diamond"><a href="http://google.com"></a></div>

 div a{ width: 100%; height: 100%; display: block; } 

JSFiddle example: http://jsfiddle.net/kQj24/1/

Answer 3

This html has a reserve for browsers that do not support the conversion in that the diamond becomes a square. In addition, <div> elements can be wrapped with <a> tags using this method, without changing any existing CSS rules for a . If conversion is not supported, the text inside the square class also does not rotate.

 <center> <div class="diamond"> <div class="row"> <a href="#"><div class="square"><p>Text</p></div></a> <a href="#"><div class="square"></div></a> <a href="#"><div class="square"><p>Text</p></div></a> </div> <div class="row"> <a href="#"><div class="square"><p>Text</p></div></a> <a href="#"><div class="square red"><p>Text</p></div></a> <a href="#"><div class="square"><p>Text</p></div></a> </div> <div class="row"> <a href="#"><div class="square"><p>More</p></div></a> <a href="#"><div class="square"></div></a> <a href="#"><div class="square"><p>Text</p></div></a> </div> </div> </center> 

CSS using an existing body rule:

 .diamond { padding-top: 50px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); } .square { background-color: white; display: inline-block; height: 50px; overflow: hidden; width: 50px; } .square:hover { background-color: green; } .square p { transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } .red { background-color: red; } 

http://jsfiddle.net/5Q8qE/8/