修复了未知宽度元素上的菱形剪辑路径？

Question

我的设计要求信息带由多个相邻的 rhomboid 宽度未知的单元格组成。

我的尝试接近了，但在一个重要方面没有达到目标：因为我提前不知道元素的宽度，所以我不得不为 polygon().[=16 使用比例值=]

这样，不同宽度的菱形 将不会以相同的角度相交（如图所示）。

我没有看到一种使用负像素值的典型模式的方法，这种模式允许我以像素为单位指定长度 for 右下角 以右下角为原点。似乎 polygon() 从左上角的单个原点解释所有坐标？

那么，我有什么替代方案可以让不同宽度的元素以相同的角度干净地相遇？

.stripe {
  width: max-content;
  display: inline-block;
}

.rhomboid {
  background-color: darkblue;
  color: white;
  padding: 0 20px;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.second {
  margin-left: -23px;
}

<div class="stripe">
  <div class="rhomboid">1234567890</div>
</div>
<div class="stripe">
  <div class="rhomboid second">1234567890 1234</div>
</div>

Answer 1

对于这种情况，我会考虑另一种比 clip-path 更简单的支持方式。你可以用简单的渐变来做到这一点：

.stripe {
  width: max-content;
  display: inline-block;
}

.rhomboid {
  background:
   linear-gradient(to bottom right, darkblue 49%,transparent 50.5%) right/20px 100%,
   linear-gradient(to top left, darkblue 49%,transparent 50.5%) left/20px 100%,
   linear-gradient(darkblue,darkblue) center/calc(100% - 40px) 100%;
  background-repeat:no-repeat;
  color: white;
  padding: 0 30px;
}
.second {
  margin-left: -18px;
}

<div class="stripe">
  <div class="rhomboid">1234567890</div>
</div>
<div class="stripe">
  <div class="rhomboid second">1234567890 1234</div>
</div>

顺便说一句 clip-path 你可以依靠使用 calc 的固定值来保持角度始终相同：

.stripe {
  width: max-content;
  display: inline-block;
}

.rhomboid {
  background-color: darkblue;
  color: white;
  padding: 0 20px;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.second {
  margin-left: -18px;
}

<div class="stripe">
  <div class="rhomboid">1234567890</div>
</div>
<div class="stripe">
  <div class="rhomboid second">1234567890 1234</div>
</div>

修复了未知宽度元素上的菱形剪辑路径？

Fixed rhomboid clip-path on elements of unknown width?

css

clip-path