Как сделать большой ромб из маленьких ромбов?

Question

[Сергей Карвасарный]

Добрый день. Может кто сталкивался с таким уже. Нужно составить ромб из мелких ромбов и проблема в том, что при наведении на каждый появляться должна инфа. prntscr.com/aqvbj3 получается навожу а углами закрывает второй т.е область наведения квадрат я как бы буду наводить на 1, а срабатывать будет 2 в определенных местах. Как решить такого рода задачу? знаю что можно использовать Канвас, но им пользоваться не умею.

Comments

[Андрей Федоров]

А кто мешает использовать z-index?

Answer 1

[Андрей Федоров]

Допустим вот так...
codepen.io/aliencash/pen/wGyeEP

Comments

[Сергей Карвасарный]

спс, но такая же фигня как и у меня, prntscr.com/aqvyny там где красным не срабатывает наведение 1 блока

[Андрей Федоров]

Сергей Карвасарный: подрихтовал немного codepen.io/aliencash/pen/wGyeEP?editors=1100

[Сергей Карвасарный]

Андрей Федоров: Норм) только, что сам сделал) про transform: rotate Забыл просто))

Answer 2

[Денис Инешин]

transform: rotate
С его помощью вы сможете легко повернуть свой квадратик на 45 градусов вместе с областью наведения.

Например вот так можно вынести ссылку отдельным слоем и повернуть ее: https://jsfiddle.net/IonDen/nsem2y6s/

Comments

[Максим Тимофеев]

Скомпоновать потом их будет адски трудно

[Денис Инешин]

Максим Тимофеев: ничего подобного, используйте цикл на LESS или SASS и все сработает как часы.

[Максим Тимофеев]

Денис Инешин: если есть мозг для LESS или SASS, то тогда уж правильнее на svg сделать

[Денис Инешин]

Максим Тимофеев: слишком тривиальная задача для SVG. Правильней делать на CSS.

[Максим Тимофеев]

Денис Инешин: Это как раз задача, для которой его и вводили. Когда есть составной объект сложной геометрии и надо взаимодействовать с его частями. Делается намного быстрее, чем в LESS или SASS. А самое главное если в проекте нет LESS или SASS, а я так чувствую, что нет. Но подключение только ради этого неоправданно. А на чистом css - это, простите, онанизм.

[Денис Инешин]

Максим Тимофеев: Вот именно, сложной геометрии. Где тут сложность? Простой поворот квадрата

[Максим Тимофеев]

Сложность в общей фигуре, а нее части. Так любой геометрический объект на точки и прямые можно разложить и сказать, что он простой. Мало того svg потом можно использовать повторно меняя маштаб и т.д. И рендер быстрее.

Answer 3

[Максим Тимофеев]

Для подобных вещей используется svg графика.
www.w3schools.com/SVG

Comments

[Сергей Карвасарный]

не шарю в ней))

[Максим Тимофеев]

Сергей Карвасарный: Думаю за 2 часа разберетесь. Там нечего шарить, для таких задач. Прочитайте уроки, там их штук 5-6.

[Сергей Карвасарный]

Максим Тимофеев: спасибо, посмотрю