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.

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:

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; }

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; }

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); }

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.

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); }

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.
