带有剪辑路径的CSS面包屑 - 需要“负”坐标

Question

我正在尝试使用clip-path制作面包屑路径。

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

给出了

虽然我喜欢该方法的简单性，但问题来自坐标90%，它们与单词的长度有关。因此“欢迎！”没有与“微小”相同的箭头角度。

当然，我可以在两个空白块之间添加两个空白块，这些空白块会粘在前面和后面的跨度上，根据需要进行整形。

但是有没有办法为polygon指定像X-Windows的“几何”坐标样式，类似于-10px（从元素的右侧/底部算起;因此，对于一个100px的元素，这将产生90px，意味着从元素的另一侧10px）？

因此，规则“几何”就像是（在css中不起作用，因为-10px从左/上计算）

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);

Answer 1

为什么不使用 calc 并尝试（100％ - 10px）。它的行为类似于元素右侧的负坐标：

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>