求助：兼容无单位与带单位值的CSS Calc变量解决方案

我实现了一个可通过CSS变量自定义的工具提示（tooltip），使用CSS calc计算箭头位置，核心变量定义如下：

--size: 16px;
--border-size: 1px;
--arrow-position: calc((var(--size) / -2) - var(--border-size));

当--border-size为带单位的值时，计算结果为-8px，运行正常。但设置无单位的--border-size: 0实现无边框工具提示时，该计算逻辑直接失效。

我尝试过calc(var(--border-size) * 1px)这类为无单位值补单位的方法，但当--border-size本身带单位时会报错——CSS乘法要求其中一侧必须无单位。也尝试过使用@property定义变量类型，但未能成功。

需要一种无需额外变量，同时兼容无单位和带单位border-size值的计算逻辑，求可行实现思路。

问题演示代码 #

CSS代码 #

div {
  --size: 16px;
  --border-size: 1px;
  --arrow-position: calc((var(--size) / -2) - var(--border-size));
  --bg-color: white;
  
  border: var(--border-size) solid black;
  padding: var(--size);
  background-color: var(--bg-color);
  
  position: absolute;
  top: 120px;
  left: 120px;
  width: 200px;
}

div::before {
  content: '';
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: var(--arrow-position);
  
  width: var(--size);
  height: var(--size);
  transform: rotate(45deg);
  border: var(--border-size) solid black;
  background-color: var(--bg-color);
  border-bottom: none;
  border-right: none;
}

div.no-border {
  --border-size: 0;
  --bg-color: gray;
  
  top: 200px;
}

div.with-unit {
  --border-size: 0px;
  
  top: 280px;
}

HTML代码 #

<div>
Tooltip Content
</div>

<div class="no-border">
Tooltip Without Borders
</div>

<div class="no-border with-unit">
Tooltip Without Borders with Unit
</div>

编辑说明：上述代码为简化演示，实际应用场景为Web组件。
补充编辑：本问题已知无单位0导致计算失效的原因，并非询问问题根源，而是寻求具体解决方案。

内容的提问来源于stack exchange，提问作者Murat Çorlu