HTML isometric view - html

Question

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?

Answer 1

Long time since this question was asked, so most probably you already found the answer that you were searching for, but I would like to clarify it for anyone reaching here with the same doubt.
If you apply CSS transformations to an HTML element, you don‘t need to make any JavaScript calculation to know if it was clicked. Looking at your comment it seems that you think that the mouse events work in the element boundary box instead of the element itself, but it doesn‘t work in that way. The mouse events are triggered when the area respective to the element is clicked, respecting its transformations.
Take a look at this small snippet. The tiles have been transformed with CSS transformations, click on the tiles so you can check that the events are triggered taking into account the diamond shape of each one.
document.querySelectorAll('.isometric').forEach(tile => {
tile.addEventListener('click', function () {
this.dataset.active = 1 - (this.dataset.active || 0);
});
});
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
left: 50%;
position: relative;
top: 50%;
transform: translateY(-100px);
}
.isometric {
background-color: #CCC;
height: 100px;
outline: 2px solid #FFF;
position: absolute;
width: 100px;
}
.isometric[data-active="1"] {
background-color: #F00;
}
<script src="https://unpkg.com/isometric-css#2.2.3/index.js"></script>
<div class="container">
<div class="isometric" data-view="top" ></div>
<div class="isometric" data-view="top" data-right="100"></div>
<div class="isometric" data-view="top" data-left="100" data-left="100"></div>
<div class="isometric" data-view="top" data-right="100" data-left="100"></div>
</div>