Максим

float это обтекание картинки текстом
flex - это позиционирование которое ни каким образом не заменит float

к примеру : все знают что shape не кроссбраузерный , но на float это делается абсолютно кроссбраузерно

https://jsfiddle.net/8mtqrzbk/10/ примерно так - дальше по шагам - адаптировать текст - так как само svg резиновое - если что то не ясно спрашивайте

проверял в Chrome Firefox IE11 EDGE - работает везде

svg или clip-path

если добавить для body в тот момент когда меню фиксируется отступ равный высоте меню - тогда скачка не будет ...
и кстати я не увидел скачка в 4х браузерах

https://codepen.io/iiil/pen/InDbp
Как сделать плавное появление меню при скролле?

https://jsfiddle.net/sa4gempf/3/

https://jsfiddle.net/8eLnfg69/15/ я верно понял ?

https://webref.ru/ вот здесь почитайте "как это делается" а сюда с реальными вопросами

вот реализация показа меню : https://jsfiddle.net/5mLqzcfw/35/

https://codepen.io/topicstarter/pen/gKQRRO?editors=1100

linear-gradient or svg

1) https://jsfiddle.net/prLsb04f/8/ - linear-gradient
2) https://jsfiddle.net/8u94vdgo/25/ -pseudo element
3)https://jsfiddle.net/712x3s40/11/ svg element