CSS3 ONLY获取元素的计算索引

Question

我正在阅读this CSS3 reference并且无法找到我希望的魔术选择器。我想要做的是在第n个子选择器中获取变量'n'以在calc（）中使用。例如，说我有

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

仅在CSS3中，我真的想做类似的事情：

li:nth-child(n) {
  display: block;
  background: black;
  width: calc(100px * n)   -- Where n references the elements index
}

这应该产生一个看起来形状的楼梯，因为每个连续元素的宽度会更大。

但这显然无法按照我编码的方式工作。有没有办法在纯CSS3中做到这一点？

我当然可以在Javascript中这样做，但我想写尽可能少的javascript。

fiddle