How to locate separate elements in the group of blocks at the angle of 45 degrees in CSS3
OUR Blog
Frontend developer
Mykhaylo Shatokhin
Frontend developer
DESIGN, FRONTEND
Mar 30 2016

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.

SIMILAR POSTS
Nov 09 2016
Missed some news in Meteor world? Don't worry and check our digest!
Oct 19 2016
This article highlights basic methods which will help you in layout and creation of adaptive emails.
Oct 11 2016
Check out all September news!