Just read http://creative-punch.net/2014/01/perfect-css-hexagons-size-using-transform-calc/. I preferred my single element way of creating hexagons http://codepen.io/gpyne/pen/iElhp but I liked the idea of using calc for maintaining aspect ratio needed. Also using rem units so that hexagons automatically resize according to root font size.
See it on a production page: https://squareup.com/gift-cards
Protip - if you're trying to animate background-position for a falling snow animation you're gonna have a bad time. Instead, use hardware-accelerated keyframe animations and handle the looping with duplicate elements.
匿名用户