Как лучше создать декоративное меню — под углом, с множественными элементами?

Question

[Vladnev]

Добрый день, создаю себе портфолио(начинающий вебмастер), очень понравился один макет - хочу его воплотить в жизнь;
Интересует ваше мнение, по поводу, как лучше сверстать меню такого формата:

Внутри ромбов будут располагаться иконки(ссылки на блоки сайта).

Из предполагаемых вариантов:
-помучатся и сверстать с помощью div и rotate;
-сократить путь и просто наложить картинкой, иконкам прописать абсолютное позиционирование под каждую ширину экрана;
-может еще какие-то варианты подскажите;
Сайт будет адаптивный.

Answer 1

[Евгений Петров]

1. Общий поворот меню.
2. Элементы меню с overflow:hidden.
3. Элементы с box-sizing:border-box, а для некоторых вместо рамки позиционируются псевдоэлементы.
4. Внутри элементов картинка, превышающие размеры элемента примерно в 1.5 раза (не менее, чем корень из 2-х) и с поворотом в обратную сторону.

Answer 2

[Vladnev]

То есть ниже представленный способ гуманный и не развалится?
codepen.io/anon/pen/pJoXLe

Comments

[Евгений Петров]

ИМХО проще создать прямоугольную структуру и повернуть её целиком. Для картинок компенсировать обратным поворотом. И в элементах списка поставить обрезку.
А так — вариантов конкретной реализации может быть десяток:)

[Vladnev]

Спасибо за уделенное время=)
C обрезкой правда не срослось - обрезает и псевдоэлементы - хоть и спозиционированны абсолютн(буду наверное картинку резать),
И хотел иконки отцентровать нормально - тоже не получается, из-за наклона, придется тоже позицинировать...

[Евгений Петров]

Достаточно вложить в li обычный span, и обрезку сделать в нём.

[Vladnev]

Евгений Петров:
Да, спасибо - очень помогли=)
В итоге такой конструкцией все выровнял:
codepen.io/anon/pen/pJoXLe