Исправление для зеркального диагонального фона

Question

Я создал решение для зеркального диагонального фонового рисунка, но ошибка существует только в Firefox, где при определенной ширине экрана появляется вертикальная линия между левым и правым позиционируемыми элементами. У кого-нибудь есть решение или взлом? Единственным требованием является то, чтобы фон был CSS (без связанных файлов изображений).

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    position: relative;
    overflow:hidden;
    border-radius:3px;
}

.stripes-diagonal-left {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    left: 0;
}

.stripes-diagonal-right {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    transform: rotateY(180deg);
    left: 50%;
}

<div class="stripes-background">
    <div class="stripes-diagonal-left" role="presentation"></div>
    <div class="stripes-diagonal-right" role="presentation"></div>
</div>

Answer 1

Сначала вы можете поместить все это в один элемент, используя несколько фоновых изображений, и чтобы исправить небольшой разрыв, просто сделайте оба градиента немного перекрывающимися.

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: repeating-linear-gradient(
      25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) left,
    repeating-linear-gradient(
      -25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) right,
    #333333;
   background-size:50.01% 100%; /*a litte bigger than 50% */
   background-repeat:no-repeat;
    
}

<div class="stripes-background">
</div>

И для лучшей обработки повторяющегося градиента вы можете использовать переменную CSS, чтобы избежать дублирования кода:

.stripes-background {
    --c:transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px;
      
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: 
     repeating-linear-gradient( 25deg,var(--c)) left,
     repeating-linear-gradient(-25deg,var(--c)) right,
     #333333;
   background-size:50.01% 100%; /*a litte bigger than 50% */
   background-repeat:no-repeat;
    
}

<div class="stripes-background">
</div>

Answer 2

Приведенное ниже решение работает в Firefox, Edge и Chrome без вертикальной линии посередине. Ответ @temani-afif был блестящим с точки зрения простоты, но вертикальная линия все еще показывалась в Firefox, хотя и не так. Тем не менее, я обнаружил, что в то время как background-size: 50.01% 100% взлом хорошо работает в браузерах не Firefox, background-size:50% 100% отлично работает в Firefox, поэтому мне пришлось создать специальную декларацию CSS только для Firefox. Я выбираю ответ Темани как лучший ответ, потому что мой ответ был бы невозможен без этой помощи.

.stripes-background {
  --c: transparent, transparent 20px, rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px;
  width: 50%;
  margin: 0 auto;
  padding: 2em;
  border-radius: 3px;
  background: repeating-linear-gradient(25deg, var(--c)) left,
    repeating-linear-gradient(-25deg, var(--c)) right, #333333;
  /*--non-firefox browsers need hack to remove vertical line--*/
  background-size: 50.01% 100%; /*a litte bigger than 50% */
  background-repeat: no-repeat;
}

/*--firefox needs no hack to remove vertical line--*/
_::-moz-range-track,
body:last-child .stripes-background {
  background-size: 50% 100%;
}

<div class="stripes-background">
</div>