I am publishing this message because I am completely stuck on one of my graphics made only in CSS and I can’t find any solution on StackOverflow.

The goal is to create a process diagram in the shape of a step arrow.

To do this, I use the ::before and:: after of an element, which I distort with the skewX method to form an arrow.

HTML

<div class="radio-shared-steps">
  <span class="radio-shared-step success"></span>
  <span class="radio-shared-step success"></span>
  <span class="radio-shared-step success"></span>
  <span class="radio-shared-step error"></span>
  <span class="radio-shared-step"></span>
</div>

CSS

.radio-shared-steps {
  width: calc(100% - (0.5rem * tan(50deg))) !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

.radio-shared-step {
  position: relative;
  text-align: center;
  height: 2em;
  width: calc(100% / 5);
  min-width: 4em;
}

.radio-shared-step > h6 {
  margin: 0;
  padding: 0;
  color: white;
  z-index: 4;
  position: absolute;
  top: calc(50% - 0.5rem);
  left: calc(50% + (0.25em * tan(50deg)) / 2);
}

.radio-shared-step:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(1em * tan(50deg));
  height: 1em;
  width: 100%;
  background: #808080;
  transform-origin: 0 0;
  transform: skewX(-50deg);
  -webkit-transform: skewX(-50deg);
  z-index: 1;
}

.radio-shared-step.success:after,
.radio-shared-step.success:before {
  background: #198754;
}

.radio-shared-step.error:after,
.radio-shared-step.error:before {
  background: #dc3545;
}

.radio-shared-step:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 1em;
  width: 100%;
  background: #808080;
  transform-origin: 100% 0;
  transform: skewX(50deg);
  -webkit-transform: skewX(50deg);
  z-index: 2;
}

The ::after and ::before are each 50% oh the height of they common parent.
When they’re layered, it’s fine, but as soon as I apply the skew, I have a line of pixels between my two elements, but only at a certain zoom level on the page/at a certain size.

Capture of bug :
arrow diags with bug

I don’t really understand what’s going on. I reproduced my problem on a codepen (link: https://codepen.io/sldc/pen/pomroWy), play with the size of the window/zoom to make the bug appear. I put 2 diagrams with different sizes to facilitate the reproduction of the bug.

Thanks for help.