Cниппет сота (hexagon) на SCSS-миксине

В этой заметке небольшой пример велосипеда на SCSS — миксин который рисует шестиугольник (hexagon) также известный как пчелиная сота. Внизу готовый код миксина.

Он существует в двух вариантах — обычный и с фоновым изображением.

Шестиугольник мы можем сделать из прямоугольного div’а и двух треугольников, как вы уже наверное догадались пары псевдоэлементов приклеив их снизу и сверху.

HTML-разметка очень проста:

И для соты с фоновым изображением:

 

Делаем шестиугольник из 4-х уголоника, два нужных для этого треугольника сделаем псевдоэлементами, использовав прием  с бордером нулевого блока.

Два псевдоэлемента мы трансформируем и прикладываем их снизу и сверху.

Коэффициенты берутся из математических справочников.

 

Код для соты с фоном:

 

Вызываем миксины в селекторе:

 

 

По мотивам https://csshexagon.com/  (генеретор CSS)

Еще интересные вещи: