Разделив квадрат по диагонали и сделав каждый полученный треугольник отдельной кнопкой

Question

Предположим, у меня есть квадрат и я делю его на диагонали, в результате чего получается четыре одинаковых треугольника (не считая их вращения).

• Используя CSS / HTML / Javascript, как лучше всего превратить каждый треугольник в интерактивную область, не разделяя при этом охватывающий квадрат?

Я пытался создать треугольники с помощью карт изображений (<map>), но мне кажется, что он работает только так, как и ожидалось в Internet Explorer.

В качестве другого возможного решения я попробовал прямоугольные делители, имитирующие треугольники, помещая постепенно меньшие прямоугольники по направлению к центру охватывающего квадрата со всех четырех «углов мира». Однако это не элегантное решение, и на самом деле это не то, к чему я стремлюсь, поскольку я хочу «ровные», а не зубчатые треугольники.

Answer 1

Я бы сделал это следующим образом:

1. Создайте div и стилизуйте его под квадрат.Используйте фоновое изображение для иллюстрации треугольников
2. Создайте квадратную переменную в javascript для хранения квадратного элемента
3. Получите позицию, высоту и ширину квадрата в вашем js
4. Выполните некоторые математические вычисления, чтобы определить координаты вершин каждого треугольника
5. Напишите функцию getQuadrant (), которая определяет, к какому треугольнику относится любая заданная точка в квадрате
6. Добавьте прослушиватель события внажмите события на площади.Слушатель события должен вызвать функцию getQuadrant
7. . Использовать переключатель / регистр для выполнения любого кода, который вам нужно вызвать, при условии, что в квадранте клик попадает в