YOU CAN MAKE A SIMPLE CSS ARCH very easily by applying border-top-left-radius and border-top-right-radius to a block html element, but for this exercise I wanted to imitate the block-by-block construction of a real arch. The blocks in the vertical walls presented no problem, but the wedge-shaped elements in the arch itself — the voussoirs — were more difficult.

The solution was to use css triangles, rotated into place with the appropriate rotation classes. Giving the triangles a width turned them into the trapezoids needed to represent the voussoirs. Finding what that width should be (along with the triangle’s border-width and height values) was mostly a matter of trial-and-error.

The remaining difficulty was how to add a thin black border around each block. Again, this was not a problem for the square blocks, since they could be styled with an ordinary css border, but this was impossible for the voussoirs, which are already built with css borders: you can’t add a border to a border.

Once again, the handy :before pseudo-element came to the rescue. In this example, the gold-colored voussoir is actually the pseudo-element, carefully positioned above its parent div.voussoir, which has a black background. The voussoir has width and border-bottom values 2px greater than the corresponding values in the pseudo-element to permit a 1px space to show all around, making it look like a 1px border.