Как сверстать верхнюю полосу в шапке?

Question

[Павел Антонов]

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

Также пробовал сделать примерно вот так

<header>
	<div class="bg-top"></div>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="bg">
					
				</div>
			</div>
		</div>
	</div>
</header>

header {
    height: 72px;
    background-color: #ffea00;
    position: relative;
}
header .bg-top{
    background:url(header-bg.png) 0 0 repeat-x;
    height: 77px;
    width: 50%;
    position: absolute;
    top:0px;
    left:0px;
}
header .bg{
    background:url(header-bg.png) 0 0 repeat-x;
    height: 77px;
    width: 960px;
}

Но тогда волнистая линия не совпадает при ресайзе окна.
Вот пример того что написал выше.

Помогите советом :) что-то я в ступоре

Answer 1

[Павел Антонов]

Всё сверстал, додумался как сделать лучше :) всем спс помог position:absolut и отрицательный left для позиционирования зеленой полосы

обновил свой пример из вопроса в связи с правильным решением, готовый вариант получился такой

Answer 2

[Артём]

stackoverflow.com/questions/33759102/wave-border-in-css