Alexander Litvinenko

Монеты спрайтом или применить что-то из разряда 3д.

Можно ли обойтись без флекс-бокс?

Только применив джаваскрипт и по-любому будет сложнее и хуже. На флексах это две строчки.

Это три прямоугольника на самом деле, один див и еще два псевдоелементами - они повернуты что был треугольник сверху и снизу, при необходимести еще и трансформированы. Фон отпозицыонирован, на самом деле там три картинки.

Назови дивы более семантически

и для .div сделай
justify-content: center
и везде вместо margin flex, это нонсенс использовать наполивину то, наполовину то

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

А по оформлению, визуально, собствено норм.

не могу понять почему так, или это принимать как исключение и мириться с этим, что по вертикали не центрируется ?

по вертикали центрируеться через flex
Суть не в margin, а в самом том что высота и ширина на сайте ведут себя по разному.
Ширина, если не менять вручную, ограничена шириной экрана.
Высота не ограничена ничем.

margin: auto создает одинаковые отступы на противоположных концах. Так как мы всегда знаем ширину контеннера-обертки и ширину контейнера-контента, то известны и сумарные размеры отступов, между ними.

Для высоты мы не знаем размеров контейнера-обертки, если он преднамеренно не задан, следовательно и не знаем размеров отступов. Потому большинство способов центрирования по вертикали требуют явно задать высоту.

Но если хорошо подумать то вобщето высоту контейнера-обертки мы знаем, но для этого мы должны смотреть на происходящее с позиции самого контейнера-обертки, напомню что margin: auto вы задаете контейнеру-контента. А смотря со стороны контейнера-обертки у нас работает flex, который может задать "центрируй внутренний контент", вместо "центрируй меня внутри контейнера обертки" как это делает margin: auto.

Если хотите узнать больше о margin, рекомендую также почитать про эффект схлопывания марджинов.

сделайте снизу зазор на 1-2vh где-то, залейте желтым, небольшое отклонение от вертикального центра небудет заметно.

функционально это ссылка, но без атрибута href, а без него она по спецификации считаеться якорем. Добавьте href="#" ссылке чтобы она была ссылкой. Что касаеться выделения - оно выделяеться, просто неудобно выделять при таком расположении.

Не проще ли пробелы всетаки удалить?

дочерние элементы флекса больше похожи на инлайн блоки в плане ширины. Вам нужно свойство flex-grow
https://css-tricks.com/almanac/properties/f/flex-grow/

HTML был релиз в 1993
CSS был релиз в 1996
то есть первый HTML не имел CSS вовсе
а отличались как верно заметили - просто другие теги.

Это не сетки, это тебе .fluid-container вместо обычного и на "только на моб" оно не делается.
Зато можешь сетку вложиться внутрь такого fluid-container сделать и создать отступы на большом экране.

Надо как раз сложные пробовать.

caniuse.com/#feat=css-filters
Вполне достаточная кросбраузерность, у ие там свои аналоги фильтров.

Gulp.
и вообще раз о таких вещах задумываетесь, то пора осваивать Sass, а это снова путь к Gulp.

nvd3.org

ни JS, ни jQuery так понимаю не владеете.
Используйте бутстреповские вкладки тогда