How to make NES Tiles with CSS


w3school has an excellent tutorial on how to build a tooltip in vanilla CSS. It makes use of the border-radius property. If you insert an empty object (span, div) in your website, add a border around the object and increase the border width, the border will look like 4 triangles pointing inwards to the center. To see these triangles, you can color each side of the border.

Normally our content has stuff inside

Here the width, height, and border-radius are 50 pixels each.

But if we shrink down the width and height of the container to 0, we see this.

Now the height and width are 0 pixels

Seeing the Triangles

To expose the apparent triangles that I claimed are formed, we can change the color of each side of the border to a unique color:

Amazing! If we decided to make 3 of the 4 sides transparent, we would arrive back at the classic tooltip.

Finally, if we return back to the multicolored quadtriangle image above, we can reskin it to resemble the Underworld Tiles from the classic NES title, Super Mario Bros 3.

Top: A tile from Super Mario Bros 3.
Bottom: Our rendition of the tile.

Thanks for reading!