I'm working on a web based mobile application which has navigation elements in triangular shape. The way I've implemented this is by having overlapping DIVs with the triangles as image backgrounds. Now, due to the way the triangles are arranged, the DIVs overlap each other. This causes some triangles to not receive any tap events.
Please see the attached picture to see what I mean. In the picture, the bounds of the "Redeem Offer" and "Featured Dentists" lie over the "Search" triangle. If I use z-index to bring the search button on top, the bounds of the Search button lie over the other two buttons.
Please advise on how I can solve this problem.
PS: I'm using Sencha Touch 2.1.1 to develop this application, if that makes any difference.
I'm looking forward to your responses.