Как сверстать блок нестандартной формы?

Я обрезал картинку с помощью clip-path, однако как задать правый серый фон и как написать текст не могу понять. Можно примерный образец??

В чем ошибка в функции?

Спасибо за ответ. По поводу второго аргумента forEach совсем из головы вылетело.

В чем ошибка в функции?

Спасибо за прекрасное решение.

Align item не работает внутри флекс контейнера, в чем причина?

tyllo, Огромное спасибо, теперь понял. Размер текста скопировал с другими стилями из авакод, и забыл удалить. Совсем забыл что задал высоту .header. Теперь задал header-container min-height и все заработало. Но все же кое что не понял, если убрать у меню display: flex, то и меню и лого смещаются вниз, почему?

Align item не работает внутри флекс контейнера, в чем причина?

Спасибо за ответ, но еще пара вопросоа.

align-items у вас работает

Я подразумевал что оно не центрирует элементы.

Просто либо у лого уберите height

Почему? Чем она мешает? По макету высота именно 130px.

либо в контейнере лого сделайте центрирование

Как именно?

Css overflow В флекс контейнере?

Спасибо за ответ, но не совсем. Посмотрите мой комментарий под ответом Владимир а

JS код возвращает Undefined, почему?

Прошу прощения, исправил. Однако все ровно возвращает undefined