为什么calc（100％-0px）有效，而calc（100％-0px）无效？

Question

我发现在Firefox中的两个Chrome中都会发生相同的行为。下面的代码没有产生一个指向右边的紫色三角形，而是给了我一个50px x 100px的矩形。如果我将calc(100% - 0)更改为calc(100% - 0px)，则会得到三角形。

.right-arrow {
  height: 50px;
  width:  100px;
  margin-bottom: 10px;
  background-color: rebeccapurple;
  clip-path: polygon(
    0 0,
    calc(100% - 0) 50%,
    0 100%
  );
}

<div class="right-arrow"></div>

Codepen