I want to be able to apply my isometric tile enter image description here

To a diamond shaped div

However I can't seem to create the isometric shaped div.

Closest I got to it was this http://jsfiddle.net/P3yKr/2/ but even then thats not going to allow me to apply the image as the background for it.


You can leave your divs as rectangles, and simply make the corners of the image transparent. You will have to a little math when detecting clicks properly, but it will be easier in the long run.

I have created a modified version of your tile with transparency:Tile with transparency

And have made a rudimentary tiling system with this image in CSS: http://jsfiddle.net/jcpmcdonald/gMV76/20/

Alternatively, I might look into using an HTML5 game engine such as CraftyJS, or Isogenic Game Engine.

  • \$\begingroup\$ That works fantastically. The only problem is the hit detection as you said. I'm unsure on how to make the divs only work for the parts of the image non-transparent. However currently that works fine. I would use one of those engines except I have limited knowledge of HTML5 and Canvas. \$\endgroup\$ – Crystalwolf Apr 17 '14 at 18:56
  • \$\begingroup\$ I tried adding a image double the size as the last tile however it's not formatting correctly. It's still displaying white over the new tile for some reason. The new tile being i.imgur.com/rvEpfU4.png \$\endgroup\$ – Crystalwolf Apr 22 '14 at 23:18
  • \$\begingroup\$ Ahh excuse me. My mistake. I didn't set the size of the new tile correctly. \$\endgroup\$ – Crystalwolf Apr 22 '14 at 23:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.