Dividing a square by the diagonals and making each resulting triangle a separate button

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.

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