CSS Only Diamond Grid Layout

Category: CSS & CSS3 , Layout | September 20, 2019
Author: AnjelaMikhaylova
Views Total: 77
Official Page: Go to website
Last Update: September 20, 2019
License: MIT

Preview:

CSS Only Diamond Grid Layout

Description:

A pure CSS diamond grid layout which transforms the blocks into diamonds using CSS3 rotate transform.

How to use it:

Create a list of items for the diamond grid.

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

The core CSS to transform the list items.

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  width: 600px;
  height: 150px;
}

ul li {
  list-style: none;
  position: absolute;
  width: 200px;
  height: 200px;
  background: #000;
  margin: -100px;
  transform: rotate(45deg);
  transition: .5s;
  overflow: hidden;
  opacity: .5;
}

ul li:hover {
  opacity: 1;
}

Reposition each list item.

ul li.item1{
  top: 0;
  left: 0;
}

ul li.item2{

  bottom: 0;
  left: 25%;
}

ul li.item3 {
  top: 0;
  left: 50%;
}

ul li.item4 {
  bottom: 0;
  left: 75%;
}

ul li.item5 {
  top: 0;
  left: 100%;
}

 

You Might Be Interested In:


Leave a Reply