HTML isometric view

If I create an isometric grid of tiles using only HTML (each grid item being a diamond-shaped image), the tiles overlap on the corners. So, clicking on one will likely click the image that is overlapping it.

I can use JavaScript to get the X/Y of the mouse click event and determine which image was clicked. I can use HTML5 and, similarly, translate the X/Y of the click into an image.

I'm looking into using SVG to rotate images 45 degrees. Then, they don't overlap. I can use an on-click on the SVG objects. So far, this appears to be the simplest method of handling click events in isometric view in HTML.

Is there a method of displaying non-square objects in HTML that I've overlooked?