Помощь новичку. Как сделать такой навбар?

Question

[Nick Krogan]

Все привет. Только учусь верстке, скачал с инета макет для практики, а там такое меню:
как правильно его сверстать? если точнее, то как сделать двойные полосы разного цвета?их ширина 2 рх. и еще, как сделать эти переливы? в фш эффекты: тиснение и градиент.
гуглил, но ответа не нашел.

Answer 1

[Борис Якушев]

Имхо, полосы можно сделать бордерами. Например home назначить правый одного цвета, а services левый, другого цвета.

Градиент делать через генератор градиента можно. А вообще есть плагин какой-то для фш.

Comments

[Nick Krogan]

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

[metaf]

nollac: Можно, через border-image, т.к. градиент в css - это изображение, а не цвет. НО это уровень далеко не новичка, вам лучше пока изучать азы. Вот вам пример бордера с градиентом codepen.io/olgar/pen/KgoEZr

Answer 2

[Александр Аксентьев]

в фш эффекты

правый клик -> копировать CSS
или
https://csshat.com/

полосы как угодно: border, тени, background, картинкой.
Куча вариантов

Comments

[Nick Krogan]

есть css hat, но это не то получается. там градиентов получается три: правые верхний и нижний углы и левый верхний. с полосами разобрался.

[Александр Аксентьев]

nollac: ну либо извращаться с костылями либо просто картинку фоновую использовать.

[Nick Krogan]

Александр Аксентьев: благодарю за ответ

[pashted]

Nick Krogan: если помогло, отметьте ответ решением

Answer 3

[Tenebrius]

Можно посмотреть в такую сторону:
https://jsfiddle.net/pkmc21w4/