Responsive diamond grid

css, css-shapes, html, responsive-design

Solution

The responsive grid of diamons:

I don't think you have the right aproach to achieve a regular responsive diamond grid layout. It would be much simpler to:

- create a responsive grid of squares (3x3 or whatever grid you feel like)

- then rotate the grid 45 degrees.

That way you won't have to fiddle with borders, pseudo elements (`:after`, `:before`) and positioning each diamond.

Here is a responsive example

It uses percentage width and padding-bottom to keep the diamonds responsive and `transform:rotate(45deg);` to rotate te whole 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 mentioned, there are some errors in your HTML that I corrected like: Ids need to be unique and href can't be used on divs.

Problem

I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond. I am having issues organising the diamonds themselves and the `href` seems to fail. - How do I position the responsive diamonds in a regular grid? Her is 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> ```

Original source

Related problems