Впринципе можно и так.
background-position: 50% 0, calc(50% + 1px) 0, 0;
Перед тем, как показать, где эти полоски, я хотел бы воспользоваться cокращённой записью background, по моему так наглядней получается.
background:
linear-gradient(#aaa, #aaa) 50% 0 / 1px 100% no-repeat,
linear-gradient(#feffe8, #feffe8) calc(50% + 1px) 0 / 1px 100% no-repeat,
linear-gradient(#feffe8, #d6dbbf) 0 / auto;
У серой полоски(первое из трех), обратите внимание на no-repeat, именно оно предотвращает сплошную заливку.
Почему linear-gradient(#aaa, #aaa), а не просто #aaa? Градиент относится к свойству background-image и соотвественно его можно также, как и картинку позиционировать(числа перед знаком /) и менять размеры(числа после /)
Просто #aaa залил бы весь фон. Вторая полос... Стоп! Их можно ведь объединить в одну, и градиенты это позволяют. Я думаю теперь вы сами поймёте, где полоска.
background:
linear-gradient(to right, #aaa 1px, #feffe8 0) 50% 0 / 2px 100% no-repeat,
linear-gradient(#feffe8, #d6dbbf) 0 / auto;