Diamond grid experiment

by 3rror404

HTML

<div class="row clearfix">
  <div class="grid-item small">
    <div><span>SMALL</span></div>
  </div>

  <div class="grid-item large">
    <div><span>LARGE</span></div>
  </div>

  <div class="grid-item medium">
    <div><span>MEDIUM</span></div>
  </div>
</div>

<div class="row clearfix">
  <div class="grid-item large">
    <div><span>LARGE</span></div>
  </div>
  <div class="grid-item large">
    <div><span>LARGE</span></div>
  </div>
</div>

CSS

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.row {
  clear: both;
  font-size: 0;
}

.row:nth-child(2) {
  margin-top: -200px;
}

/* this creates white border around diamond... */
.grid-item {
  display: inline-block;
  position: relative;
  background: white;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* content of diamond... */
.grid-item div {
  display: inline-block;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: #e6e6e6 url(http://placebacon.net/400/400);
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.grid-item div span {
  font-size: 30px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.small {
  width: 200px;
  height: 200px;
  transform: translateY(-100px);
}

.medium {
  width: 300px;
  height: 300px;
  transform: translateY(-50px);
}

.large {
  width: 400px;
  height: 400px;
}

.medium:nth-child(1) {
  margin-left: 50px;
}

JavaScript

/*
$('.grid-item').each(function() {
	var randomColor = Math.floor(Math.random()*16777215).toString(16);
  $(this).css('background-color', '#' + randomColor);
  
  console.log(randomColor)
})
*/