Arbitrary lone triangles
After seeing CSS geometry using slants and constructing polygons, I thought about creating arbitrary vector graphics. The first step of which is creating an arbitrary triangle. I present to you the fruits of my effort.
It is made using the observation that every triangle has a rectangular bounding box with vertical and horizontal sides. For an arbitrary triangle, there are at most three right-triangle regions that must be clipped away from this rectangle to form the triangle, and this is exactly what I do. I create a red box, and then clip away three right triangles using the slants method.
Tetrahedron - conjoined arbitrary triangles
The next problem is using these triangles for composition, into more complex figures of many adjacent triangles.
This method of forming the image is very much not ideal. Once again, there is a bounding rectangle for the figure and I clip out the four right-triangles on each corner. To get the color difference, I add another slanty trapezoid to the back before the clipping. Obviously this method is not extendable to arbitrary numbers and orientations of triangles.
Octahedron - vertex of degree 4
Well, this turned out alright after all. This time, the clipping at the four corners is done again, and there are 4 background colors that we have to take care of for the background square. The main trick here is the order in which you must overlap successive colors. First of all, according to the above slants page, understand that the basic shapes we work with are right-triangles, right trapezoids, and rectangles. Also possible are isosceles triangles, but those are not very useful.
Depending on the order in which you choose to form each region, more or fewer triangles will be needed. Some orderings may not form a region in a finite number of triangles. The sequence above shows the order I used, with the main background in gray for clarity. Given this, a vertex of arbitrary degree should be possible in simple situations where the clipping is simple enough to mask the edges.
If you know of a generic algorithm to render a 2D scene with only right-triangles, right-trapezoids, rectangles, and isosceles triangles that are aligned to a rectilinear grid, please tell me! It could be possible to write a 3D engine using only JavaScript, CSS, and HTML!