html - Responsive diamond grid

Question

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>

Answer 1

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>