Манипулирование повторным линейным градиентом

Question

Я хочу воссоздать шаблон линий, аналогичный веб-сайту бренда Uber: https://brand.uber.com/ в частности повторяющиеся линии, которые вы можете видеть на заднем плане: http://prntscr.com/etius6

чтобы сделать это, я подумал об использовании повторяющегося линейного градиента с CSS.

.container {
  background-image: repeating-linear-gradient(90deg,  #d8d8d8, #d8d8d8 1px,  white 0, white 16.666666667%);
    min-height: 5000px;
     max-width:904px;
  margin:0 auto;
}

<div class="container">
  
</div>

и вот скрипка: https://jsfiddle.net/jz7ag7L1/

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

любая помощь была бы отличной, спасибо

Answer 1

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

background-image: linear-gradient(to right, white, white 1px, transparent 0, transparent 100%),repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 16.66667%);

Answer 2

Если внутренний блок не является проблемой, то скрываем левую серую линию позади и внешний блок переполнением: hidden works:

.container .inner {
  background-image: repeating-linear-gradient(90deg,  #d8d8d8, #d8d8d8 1px,  white 0, white 20%);
  min-height: 5000px;
  margin-left: -1px;
}
.container {
  max-width: 904px;
  margin:0 auto;
  overflow: hidden;
}

<div class="container"><div class="inner"></div></div>

https://jsfiddle.net/jz7ag7L1/1/