3x3 diamond grid

Rotated 3x3 gid like a diamond with links.

by web tiki

HTML

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

CSS

html,body{
    height:100%;
    margin:0;
    background: #000;
}

#big_diamond{
    width:50%;
    margin: 25%;
    float:left;
    
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
#red{
    background-color:#AA1C08;
}

.diamond{
    width: 31.33%;
    padding-bottom:31.33%;
    margin:1%;
    background:#fff;
    float:left;
    position:relative;
}
.diamond a{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}