freislot
@freislot
Frontend-разработчик

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

5c7593dda6194624a4fe89f969b5b999.png

Ребят, не могу догнать как реализовать верхнюю полосу в шапке, дизайн адаптивный по бутстрапу, получается всю полосу сохранить в 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;
}


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

Помогите советом :) что-то я в ступоре
  • Вопрос задан
  • 560 просмотров
Решения вопроса 1
freislot
@freislot Автор вопроса
Frontend-разработчик
Всё сверстал, додумался как сделать лучше :) всем спс помог position:absolut и отрицательный left для позиционирования зеленой полосы

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы