I was going to cheat and make each bar its own div and layer them with z-index.

I think we could possibly do something like this without z-index:

• position: absolute
• left: (add up all the previous bars)%
• margin-left: -4px;
• border-right: 4px solid;

I believe that will make them layer correctly, although we might need to render them backward (rightmost bar first).

However, I don't really love the added complexity of adding up all the previous bars -- it's nice that we don't have to do that with this approach. But maybe this is sort of moot, it probably won't really make eventual JS layout particularly more complex.

I think the rounded stuff might also make, like "1" and "2" look only slightly different (i.e., "1" will be ~5px wide with a chunk out of it, "2" will be ~6px wide with a chunk out of it) which might be hard to read, although maybe not a big deal.

We can go back to the other thing if we run into trouble with this, but I think it's probably OK.