Диагональные кликабельные блоки в HTML

Question

Мне нужно, чтобы белые блоки реагировали на события щелчка и наведения, но, как мы все знаем, DOM - это все прямоугольные блоки.Так что я действительно не уверен, как подойти к этому.Диагональные линии затрудняют это, потому что я не могу просто наложить отрицательные поля на элементы img и перекрыть их, потому что тогда кликабельные области будут перекрываться.

Я открыт для решения с помощью JS / Jquery, если это необходимо.

РЕДАКТИРОВАТЬ: я не могу полагаться исключительно на CSS3, к сожалению.

Заранее спасибо!

Решение Этоэто всего лишь отрывок из того, что я на самом деле сделал, так что это немного грязно с точки зрения кода, но вот, пожалуйста.Как отмечено ниже, я решил пойти по пути CSS3, так как он все равно изящно ухудшается.

Демонстрация: http://jsfiddle.net/4Vgdu/1/

Answer 1

Я читал, что вы не можете использовать CSS3, потому что вам нужно поддерживать IE.

Вы можете исказить в IE6 и выше, используя матричные фильтры .Не уверен, как будет обрабатываться интерактивность, но стоит попробовать.

Вы можете легко перевести перекос в матрицу фильтра IE с помощью этого инструмента:

http://www.useragentman.com/IETransformsTranslator/

(не работает в Chrome, используйте Firefox).

Если интерактивность обрабатывается нормально, то фильтры + перекос CSS3 могут достичь того, что вам нужно (в основном) кросс-браузер.

Answer 2

Вы можете использовать атрибут skewX свойства преобразования css3:

примеры skewX

, а затем просто применить событие mousemove к преобразованному div

Answer 3

Вы можете использовать тег <area> для указания координат любой фигуры, CSS3 не требуется - см. Здесь: http://www.tutorialspoint.com/html/html_area_tag.htm

Answer 4

Я предполагаю, что вы знаете координаты всех ваших фигур, так что вы можете просто сделать так, чтобы ваш родительский элемент зафиксировал щелчок, или перемещение мышью, или любое другое событие и использовал немного математики, чтобы выяснить, какой элемент в данный момент находится у мышив. Я не могу сказать, что знаю уравнение для определения того, лежит ли точка в форме, подобной этой, на макушке моей головы, но я уверен, что она есть.

Answer 5

Как сказал Оддант, transform: skew(), вероятно, будет лучшим выбором, если вы можете положиться на CSS3.

Если, с другой стороны, вы не можете предполагать поддержку CSS3 или вам необходимо перекошить содержимое поля , а не , то вы можете только приблизить области щелчка, как в пример размещен Джавадом .