LittleGoose

Большое спасибо за труд, но к сожалению я не понял как вы сделали свг фигуры. Скажите пожалуйста, имеет ли место быть такой вариант. общий занимаемый вес 2х пнг всего 10кб. header { background-color: #2d2d2d; height: 250px; background-image: linear-gradient(90deg, #2d2d2d 45%, #ffcf28 0); } .header-delimiter { width: 200px; height: 250px; background: url(IMG/p1.png) no-repeat; position: absolute; margin: 0; margin-left: 43%; } nav { background-image: linear-gradient(90deg, #ffcf28 45%, #2d2d2d 0); height: 50px; } .nav-delimiter { width: 200px; height: 50px; background: url(IMG/p2.png) no-repeat; position: absolute; margin-left: 43%; } Только что то мне подсказывает что я налажал с позиционированием.

Спасибо всем большое за то что откликнулись ?

Имеете ввиду на этот участок наложить изображение?

Еще один вопрос, у меня почему то размыло края полоски и нав принял иной цвет, не подскажете в чем может быть проблема? header { padding-top: 200px; background-image: linear-gradient( 67deg, #2d2d2d 50%, #ffc828 0, #ffc828 calc(50% + 10px), #2d2d2d 0, #2d2d2d calc(50% + 20px), #ffc828 0 ); } nav { height: 50px; background-color: #ffc828; mix-blend-mode: difference; }

Спасибо большое ? сейчас буду разбираться что это все значит

Здраствуйте, подскажите пожалуйста как грамотно сверстать такой хедер/нав. можно задать фон градиентом и на место разделения вставить картинкой (выделенное пунктиром), но я думаю есть более рациональное решение, просто я начинающий и найти его не смог. Ширина заливки хедера и меню должна быть 100%, контент хедера и меню 1170px разделение на 50%.