“How to locate separate elements in the group of blocks at the angle of 45 degrees in CSS3”

For the Tipcow project, our designers were tasked with creating diamond-shaped blocks for the social network icons that moved in a zig-zag pattern. The quantity was not predetermined and the option to delete and add links also needed to be available.

Non-animated result

Some ready-to-use solutions already existed online, but they didn't suite. Our idea required each diamond to have an absolute position, not allowing them to move. This solution would require front-end developer intervention each time a new icon needed to be added, which is not cool in terms of usage by our customer. As a result of much trial and error, we were able to find a neat solution. We created a simple list layout with the social network icons inside. Here is an example taken from the icon set socicon:

<ul class="soc-list">
    <li><a href="/"><i class="socicon-facebook"></i></a></li>
    <li><a href="/"><i class="socicon-twitter"></i></a></li>
    <li><a href="/"><i class="socicon-linkedin"></i></a></li>
    <li><a href="/"><i class="socicon-instagram"></i></a></li>
</ul>

Styles table:

.soc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.soc-list li {
  word-spacing: normal;
  display: inline-block;
  vertical-align: top;
  padding: 0;
}

.soc-list a {
  color:#fff;
  background: #e2e2e2;
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}

.soc-list a:hover {
  background: #b29f87;
}

Icons centering:

.soc-list i {
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
}

Result:

Initial social icons

Additional issue was to remove indents for the inline-blocks. There are plenty of methods to do this, which can be read about in detail here, for instance. We decided to use following approach.

  
    @media all and (-webkit-min-device-pixel-ratio: 0) {
      .soc-list {
        display: table;
        width: 100%;
      }
    }

    .soc-list {
      list-style: none;
      padding: 0;
      word-spacing: -0.36em;
      text-align: center;
    }

    .soc-list li {
      word-spacing: normal;
      display: inline-block;
      vertical-align: top;
      padding: 0;
    }

Social icons without spacing

Squares turn:

    .soc-list a {
      color:#fff;
      background: #e2e2e2;
      position: relative;
      display: block;
      width: 34px;
      height: 34px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

Squares diagonal is 48 pixels (a little bit of school Maths: side 34px multiplied by the square root of 2). Set necessary height and width for list items.

    .soc-list li {
      word-spacing: normal;
      display: inline-block;
      vertical-align: top;
      padding: 0;
      width: 48px;
      height: 48px;
    }

Rotated icons

Add 4 more pixels to width “li” for indents 48+4=52:

    .soc-list li {
      word-spacing: normal;
      display: inline-block;
      vertical-align: top;
      padding: 0;
      width: 52px;
      height: 52px;
    }

Besides, we need to align the links, so that they are within the borders of their parent elements from list “li”. Again a little bit of Maths here: subtract the link’s side length inside “li” block from the length of “li” block and divide it by 2. (54-34)/2=9px. Set 9px for links “left” and “top”

    .soc-list a {
      color:#fff;
      background: #e2e2e2;
      position: relative;
      display: block;
      width: 34px;
      height: 34px;
      left:9px;
      top:9px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

Diamond icons with spacing

Now we shift search elements by half of width 52/2=26:

    .soc-list li {
      word-spacing: normal;
      display: inline-block;
      vertical-align: top;
      padding: 0;
      width: 52px;
      height: 52px;
      margin: 0 0 0 -26px;
    }

In the same way, let’s drop the event elements by half of height:

    .soc-list li:nth-child(2n) {
      margin-top: 26px;
    }

It is almost finished. Now we only have to turn the icons and to use some magic for hover effect. However, the main point is already achieved: you can have as many diamonds as you wish, and they will look satisfyingly whatever the screen size may be.

Rotated icons in zig-zag pattern

Let’s turn the icons:

    .soc-list i {
      font-size: 16px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -8px 0 0 -8px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

Icons in zig-zag pattern

Now make a transition:

    .soc-list a {
      color:#fff;
      background: #e2e2e2;
      position: relative;
      display: block;
      width: 34px;
      height: 34px;
      left:9px;
      top:9px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-backface-visibility: hidden;

      -webkit-transition: -webkit-transform .5s;
      -moz-transition: -moz-transform .5s;
      -ms-transition: -ms-transform .5s;
      -o-transition: -o-transform .5s;
      transition: transform .5s;
    }

When pointing we will turn the element from the list by 360 degrees. Since the link is already tuned by 45 degrees, we need to turn it by 360+45=405 degrees:

    .soc-list a:hover {
      background: #b29f87;

      -webkit-transform: rotate(405deg);
      -ms-transform: rotate(405deg);
      transform: rotate(405deg);
    }

That’s it. Enjoy. As you can see, nothing special and basically nothing new. The interest of the task lays in its universality: you can use any quantity of elements. At any screen size. Thanks to our designer for the task :) If you use any pre- or post- processor CSS, you can make a mixin to transmit the sizes of indents and diamond’s sides.

Animated result

See the Pen xVrwZr by SteelKiwi (@SteelKiwi) on CodePen.