Как диагонально обрезать блоки и заставить ховер-эффект на них срабатывать корректно?

Question

[keker1337]

Есть вот такие диагонально обрезанные блоки вплотную друг с другом.



При наведении на каждый из них, он делится на два подблока, вот так



Интересует как лучше всего обрезать блок таким образом(я бы просто картинку вставил обрезанной, но она еще красным заливается, но они еще при наведении красным заливаются), но самое главное - срабатывания ховера. Блоки ведь, даже если их как то можно трансформировать, все равно остаются прямоугольными под капотом, и получатся если я буду наводиться где-то в центре на стыке двух блоков, ховер эффект будет срабатывать только для одного из блоков, тот что выше z-index`ом.



Есть идеи, товарищи?

Comments

[Максим]

идеи есть - только не понятно сколько таких блоков ..точнее как меняется сетка ...к примеру это можно без проблем сделать на SVG только надо выяснить ...увидеть весь макет

[keker1337]

Много Чего, все что касается этих блоков по сути на скринах. На первом собственно эти два блока, на втором - то что происходит при наведении на левый(материалы) блок: он делится на два подблока, и тот подблок на котором курсор - залит красным полупрозрачный фильтром. Есть еще скрин наведения на правый(кровля) блок, но не вижу смысла, там по сути тоже самое происходит.
А под сеткой что имеется ввиду?

[Максим]

keker1337, https://codepen.io/topicstarter/pen/OJXRGXX - я вот это хотел показать ? просто время ни всегда есть

Answer 1

[RAX7]