用对角线将正方形除以每个生成的三角形作为单独的按钮

Question

Suppose I have a square and divide it by the diagonals resulting in four identical triangles (apart from their rotation).

• Using CSS/HTML/Javascript, what is the best way to turn each triangle into a clickable area while not splitting apart the encompassing square?

I have been looking into creating the triangles using image maps ( <map> ), but it seems to me it only works as expected in Internet Explorer.

As another possible solution, I have tried rectangular divs mimicking the triangles by placing gradually smaller rectangles towards the center of the encompassing square from all four "corners of the world". However, that is not an elegant solution, and really not what I'm aiming for, since I want "smooth", not jagged, triangles.

Answer 1

I would do it like this:

1. Create a div and style it to be a square. Use a background image to illustrate the triangles
2. Create a variable, square, in javascript to hold the square element
3. Get the position, height, and width of square in your js
4. Do some math to determine the coordinates of each triangle's vertices
5. Write a function, getQuadrant(), that determines which triangle any given point within the square is in
6. Add an event listener to click events on the square. The event listener should call the getQuadrant function
7. Use a switch/case to execute whatever code you need to call conditional upon which quadrant the click lands in