Question

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

我的尝试接近完成，但是以一种重要的方式错过了分数：由于我不提前知道元素的宽度，因此不得不为polygon()使用比例值。

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

我没有看到一种使用负像素值的典型模式的方法，该模式允许我以右下角为右下角指定的像素长度起源。似乎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>

在未知宽度的元素上固定了菱形剪切路径？

1 个答案: