Triangle Grid

by kthornbloom

HTML

<h1>New Products</h1>
<div class="tri-wrap">
<a href="#1" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#2" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#3" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#4" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#5" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#6" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#7" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#8" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#9" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#10" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#11" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#12" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#13" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#14" class="tri-content">
    <img src="http://kthornbloom.com/public/item2.png">
    <div class="tri"></div>
</a>
 <a href="#15" class="tri-content">
    <img src="http://kthornbloom.com/public/item1.png">
    <div class="tri"></div>
</a>
 <a href="#16" class="tri-content">
    <img...

CSS

h1 {
    font-family:Georgia;
    font-weight:normal;
    font-style:italic;
    color:#ccc;
    font-size:50px;
    margin:40px;
    text-align:center;
}

.tri-wrap {
    overflow:hidden;
}
.tri-content {
    width:150px;
    height:200px;
    display:inline-block;
    position:relative;
    text-align:center;
    margin-bottom:3px;
    vertical-align:top;
    color:#000;
    text-decoration:none;
    transition:all .2s ease-out;
}
.tri-content img {
    max-width: 100px;
    height: auto;
    margin-top: 20px;
}
.tri-content:nth-child(2n) img {
    margin-top:70px;
}
.tri-content:hover {
    -webkit-transform:scale(1.05);
}
.tri {
    border: 150px solid rgba(0, 0, 0, 0);
    position: absolute;
    left: -75px;
    z-index:-1;
}
.tri-content:nth-child(2n) .tri {
    border-bottom: 200px solid;
    top: -150px;
}
.tri-content:nth-child(2n-1) .tri {
    border-top: 200px solid;
    top: 0px;
}

JavaScript

var colors = ['#FBFFE2', '#E8E6CE', '#FFFCEF', '#E8E1CE', '#FFF4E2', '#BFBDB3', '#E5E3D7'];

$('.tri-content:nth-child(2n)').each(function () {
    var color = colors[Math.floor(colors.length * Math.random())];
    $(this).find('.tri').attr('style', 'border-bottom-color: ' + color + '!important');
});

$('.tri-content:nth-child(2n-1)').each(function () {
    var color = colors[Math.floor(colors.length * Math.random())];
    $(this).find('.tri').attr('style', 'border-top-color: ' + color + '!important');
});