Как грамотно сверстать?

[LittleGoose]

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

[mrnobody]

Так примерно https://codepen.io/corvus-007/pen/rvrBOV

UPD: новая версия: https://codepen.io/corvus-007/pen/vjaGOe

[LittleGoose]

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

 

[LittleGoose]

Еще один вопрос, у меня почему то размыло края полоски и нав принял иной цвет, не подскажете в чем может быть проблема? 

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;
}

Edited May 14, 2018 by LittleGoose

[mrnobody]

К сожалению Фон должен быть черным #000, а не #2d2d2d.

С размытостью тоже проблемы - чем ширине окно тем размытее и пляшет ширина, блин не ожидал. Попробовал дробные пиксели поставить, тоже не помогло ((. Но в лисе выглядит хорошо.

Даже не знаю, может кто-нибудь подскажет как решить проблему. Или как-то по другому реализовать такой эффект.

[klierik]

Забегая чутка вперёд обращу внимание на то что в IE это работать не будет: https://caniuse.com/#feat=css-mixblendmode

Предложенный вариант, кстати, реально крут, ничего не скажешь, но не кроссбраузерно. Я бы сделал через PNG (retina ready) для надёжности.

[LittleGoose]

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

[mrnobody]

Вот еще упрощенный вариант, но тоже с ограничениями, но не значительными

https://codepen.io/corvus-007/pen/vjaGOe

[Колхозник деревенский]

53 минуты назад, LittleGoose сказал:

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

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

[LittleGoose]

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

[mrnobody]

Обновил пэн https://codepen.io/corvus-007/pen/vjaGOe?editors=0110 и добавил картинки если вам нужны будут

Untitled-2-01.svg

Untitled-2-02.svg

[LittleGoose]

8 часов назад, mrnobody сказал:

Обновил пэн https://codepen.io/corvus-007/pen/vjaGOe?editors=0110 и добавил картинки если вам нужны будут

Untitled-2-01.svg

Untitled-2-02.svg

Большое спасибо за труд, но к сожалению я не понял как вы сделали свг фигуры. Скажите пожалуйста, имеет ли место быть такой вариант. общий занимаемый вес 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%;
}

Только что то мне подсказывает что я налажал с позиционированием. 

[mrnobody]

svg я делал в adobe illustrator.

В вашем варианте с абсолютным позицонированием тяжело рассчитать их расположение, И еще вдруг изменится высота, то появятся разрывы и не состыковки.

Если вам не подходят предыдущие картинки, я могу новые сделать пока у меня есть свободное время, там не сложно.

UPD сделал потоньше линии:

bg-01.svg

bg-02.svg