Pure CSS Responsive Triangle/Diamond Grid Layout

Preview:

Description:

A creative and fully responsive triangle/diamond grid layout using CSS3 transitions, transforms and media queries. Built by eliwilliamson.

How to use it:

Include the necessary modernizr.js Javascript library in the head section of your web page.

<script src="modernizr.js"></script>

Create a grid layout following the markup structure like this.

<ul class="diamonds">
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
  <li> <a href="#" class="diamond">
    <div class="content">
      <div class="top triangle">
        <p>CSS</p>
      </div>
      <div class="bottom triangle">
        <p>script</p>
      </div>
    </div>
    </a> </li>
</ul>

The required CSS to transform grid items into triangles/diamonds and give them a little subtle hover effects.

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body,
ul {
  background: #212121;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 3px;
}
.diamonds {
  height: 269.8px;
  overflow: hidden;
  font-size: 0;
  margin: 40px auto;
  min-width: 530px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}
@media only screen and (max-width: 537px) {
.diamonds {
  margin-left: -265px;
  left: 50%;
  position: relative;
}
}
@media only screen and (min-width: 1348px) {
.csstransforms .diamonds { max-width: 1324px; }
.csstransforms .diamonds > li:nth-child(9n+6) { margin-left: 128px; }
.csstransforms .diamonds > li:nth-child(9n+5) { margin-right: 0; }
.csstransforms .diamonds > li:nth-child(n+5) { margin-top: -55px; }
}
@media only screen and (max-width: 1347px) and (min-width: 1078px) {
.csstransforms .diamonds { max-width: 1060px; }
.csstransforms .diamonds > li:nth-child(7n+5) { margin-left: 128px; }
.csstransforms .diamonds > li:nth-child(7n+4) { margin-right: 0; }
.csstransforms .diamonds > li:nth-child(n+4) { margin-top: -55px; }
}
@media only screen and (max-width: 1077px) and (min-width: 808px) {
.csstransforms .diamonds { max-width: 794px; }
.csstransforms .diamonds > li:nth-child(5n+4) { margin-left: 128px; }
.csstransforms .diamonds > li:nth-child(5n+3) { margin-right: 0; }
.csstransforms .diamonds > li:nth-child(n+3) { margin-top: -55px; }
}
@media only screen and (max-width: 807px) {
.csstransforms .diamonds { max-width: 530px; }
.csstransforms .diamonds > li:nth-child(3n+3) { margin-left: 128px; }
.csstransforms .diamonds > li:nth-child(3n+2) { margin-right: 0; }
.csstransforms .diamonds > li:nth-child(n+2) { margin-top: -55px; }
}
.csstransforms .diamonds { padding: 39px 0 39px 42px; }
.no-csstransforms .diamonds { max-width: 1060px; }
.diamonds > li {
  display: inline-block;
  font-size: 12px;
  position: relative;
  top: -135.66px;
  margin-right: 80px;
  margin-left: -5px;
}
.no-csstransforms .diamonds > li { margin: 0 20px 20px 0; }
.diamonds .diamond {
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
  background: white;
  border: 1px solid white;
  color: white;
  display: block;
  height: 190px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  width: 190px;
}
.csstransforms .diamonds .diamond {
  overflow: hidden;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.diamonds .content {
  display: table-cell;
  height: 190px;
  padding: 0 10px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  vertical-align: middle;
  width: 190px;
}
.triangle {
  -moz-transition: background-color 100ms linear;
  -o-transition: background-color 100ms linear;
  -webkit-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
  display: table;
  height: 144.4px;
  width: 269.8px;
  text-align: center;
  background: #333333;
  position: relative;
  left: -70.3px;
}
.triangle:hover { background: #444444; }
.triangle.top p { padding-top: 43.7px; }
.triangle.bottom { margin-top: 2px; }
.triangle.bottom p { padding-bottom: 43.7px; }
.triangle p {
  display: table-cell;
  vertical-align: middle;
}