Помощь в понимание наложения

Имеется два блочных элемента повернутых на 45deg, в результате поворота, один элемент накладывается поверх другого, в результате чего, пустые поля не дают взаимодействовать с элементом под ними. Как это исправить.
Ссылка на скрин с примером проблемы: https://yadi.sk/i/YlrQ6-jocm7vCQ
По примеру:
Синяя область не дает взаимодействовать с черным ромбом, в той местности которая перекрыта.
Знаю, что можно поставить позишн релетив и установить разные индексы. Но этот вариант не подходит. Необходимо что бы черный ромб был под белым.
Заранее спасибо за советы и прошу прошения за неграмотную речь и не грамотное объяснение проблемы..

Не уверен что это возможно, поскольку при твоей трансформации (или что-там у тебя) белый ромб все еще остается квадратом, который перекрывает половину черного квадрата.
Если бы мне надо было решить такую проблему, то я бы обрабатывал события родительского элемента, и при помощи event.clientX, event.clientY и математики решал какой ромб был нажат. Для упрощения, можно обрабатывать события белого ромба, и считать, были ли они сделаны с черным ромбом или нет

Такая же была проблема. Пришлось отказываться от такой задумки. Сделайте проще.