Dividing the square on the diagonals and creating each resulting triangle with a separate button

Question

Suppose I have a square and divide it with diagonals, which leads to four identical triangles (except for their rotation).

• Using CSS / HTML / Javascript is the best way to turn each triangle into a clickable zone without dividing the enclosing square?

I am creating triangles using image maps ( <map> ), but it seems to me that it works only in Internet Explorer.

As another possible solution, I tried rectangular divs that mimic triangles, gradually placing smaller rectangles in the center of the enclosing square of all four “corners of the world”. However, this is not an elegant solution, and in fact, not what I strive for, since I want "smooth", but not jagged triangles.

Answer 1

I would do it like this:

• Create a div and create it as a square. Use a background image to illustrate triangles.
• Create a variable, square, in javascript to hold the square element
• Get position, height and square width in js
• Do some math to determine the coordinates of each vertex of the triangle
• Write a function, getQuadrant (), which determines which triangle of any given point inside the square is in
• Add an event listener to click events on the square. The event listener must call the getQuadrant function
• Use the / case switch to execute whatever code you need to trigger a condition on which the quadrant clicks in