Fixed rhomboid clip-path on elements of unknown width?

Question

My design calls for informational ribbon consisting of several adjacent rhomboid cells of unknown width.

My attempt comes close but misses the mark in an important way: since I don't know the width of the element ahead of time, I had to use proportional values for the polygon().

This way, rhomboids of different widths will not meet at the same angle (as demonstrated).

I didn't see a way of employing the typical pattern of using negative pixel values that would allow me to specify a length in pixels for the bottom-right using the bottom right as an origin. It seems that polygon() interprets all coordinates from a single origin in the upper-left?

So, what are my alternatives for allowing elements of different widths to meet cleanly, and all at the same angle?

.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

For this case I would consier another easier way more support than clip-path. You can do this with simple gradient:

.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>

By the way with clip-path you can rely on fixed value using calc in order to keep the angle always the same:

.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>