Let’s say we wanted to have something like this: Clockwise circular (cyclic) distribution with partially overlapping items. At first, this doesn’t seem too complicated. We start with 12 numbered items: – 12.times do |i| .item #{i} We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice. $d: 2em; .item { position: absolute; margin: calc(50vh – #{.5*$d}) 0 0 calc(50vw – #{.5*$d}); width: $d; height: $d; box-shadow: inset 0 0 0 4px; background: gainsboro; font: 900 2em/ #{$d} trebuchet ms, tahoma, verdana, sans-serif; text-align: center; } So far, so good: See the Pen by thebabydino (@thebabydino) on CodePen. Now all that’s left is to distribute them on a circle, right? We get a base angle $ba for our distribution, we rotate each item by its index…

Read More →