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>

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.

Answer 2

You're going to need to be more specific / clear on your first question.

First of all, you are using the ID 'diamond' many times. IDs are meant to be unique and used for one element. You should be using classes for this, not IDs.

Second, you can't use href within div tags. You could wrap the divs in a tags like this:

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

Or, even better so that the whole shape is clickable you can put the a inside of the div and make the a a block level element that is 100% width and height like this:

<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 fallback for browsers that don't support transform in that the diamond becomes a square. Also the <div> elements can be wrapped in <a> tags using this method without altering any existing css rules for a. If transform isn't supported the text inside the square class doesn't rotate either.

<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 your 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/