Jak przesunąć header-right do lewej strony bez utraty szerokości?

Question

Na stronie mam umieszczone 4 elementy jako header:
1. górny header to header-nav-container (tło jako ukośne paski)
2. dolny header po lewej to header-left (tło jako ukośne paski)
3. dolny header po środku to header (tu widnieje napis)
4. dolny header po prawej to header-right (ukośne paski są przesunięte w prawo o 1px lub max 2px)

Tak to aktualnie wygląda:
http://imageshack.com/a/img922/1293/00CN47.jpg

Na powyższym obrazku widać, że w środku czerwonego obramowania (narysowanego dla testu) ukośne paski z header-nav-container nie łączą się z ukośnymi paskami z header-right.

Tak wygląda kod:
https://jsfiddle.net/Krzysiek_35/uLkgrqo6/

Nie wiem jak przesunąć ukośne paski w elemencie "header-right". Trzeba ten element przesunąć w lewo o 1px lub max 2px i będzie ok.

Wiecie jak przesunąć tego header-right w lewo o 1px lub max 2px bez utraty szerokości, aby te ukośne paski były idealnie połączone z header-nav-container?

Proszę o fachową pomoc.

Answer 1

Na hama  transform, albo bym zmienił koncepcję. Niech header-conheader-container będzie tlem a kawałek który nie musi być pokryty paskami niech ma wysoki z-INDEX albo absolute względem header-container.

Comments

Efekt będzie jeszcze gorszy niż przy aktualnym kodzie. Pomożecie w rozwiązaniu tego problemu czy podchodzicie lekceważąco?

---

A sprawdzałes? :)

---

Dolny header po środku ma mieć przezroczyste tło podane jako background-color: rgba(0, 0, 0, 0.75). Gdyby nie ten rgba, to nie byłoby problemu z wykonaniem tego zadania. Tylko, że ja nie chce usuwać tego tła. Podasz jakieś sensowne rozwiązanie?