3

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>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
redrubia
  • 2,256
  • 6
  • 33
  • 47

3 Answers3

6

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:

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

Here is a responsive example

Responsive diamond grid layout

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.

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    thanks very much @web-tiki. I can see the big diamond seems to determine where the elements sit if I'm correct? Played around with margin width to see this- reducing it tends to go left, caused by the float left. So lets say you want to increase the padding around each diamond - I assume you increase margin? but the forces the diamonds to go onto another level and be broken from the single consistent diamond, so how else do you deal with this change? sorry for all the questions, I really like to learn rather than copy code :) – redrubia Apr 20 '14 at 19:48
  • @redrubia First, to understand better, you should remove the rotation (I commented the rotation code out so it doesn't apply in the following fiddle). Second, the big diamond contains all the small ones so changing it's marin/position will affect all of them together. That is why it is easier to deal with than to position each one seperatly. Third, in this fiddle : http://jsfiddle.net/webtiki/5bGc9/40/ I changed the padding between each small diamond. You have to be aware that when you change margin/padding or width on floated elements, – web-tiki Apr 20 '14 at 20:12
  • you need to calculate the sum of horizontal space taken by each element (width + padding + margin +border if there is some) and that must be = or smaller than 100% otherwise they can't fit and the last element goes to second line breaking your layout. – web-tiki Apr 20 '14 at 20:13
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/

Patrick Allen
  • 2,148
  • 2
  • 16
  • 20
  • the problem with wrapping the div inside the anchor is that the link won't be available on the exact shape; it's actually a little more complex to do (see my answer)... – benomatis Apr 20 '14 at 15:13
0

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/

Jason Aller
  • 3,541
  • 28
  • 38
  • 38