Возможно ли сделать любую фигуру через css?

А размеры фигуры фиксированные или отзывчивые? Если фиксированные, то проще всего взять clip-path:path() и в нем описать контур фигуры SVG-синтаксисом (как d у <path>). Если отзывчиывые, то придется комбинировать методы, например, border-radius для верхних уголков + маску из нескольких градиентов для нижней части (быстрый пример).

Как создать такую фигуру?

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

Как сделать такой clip-path на задний фон?

Не рациональнее ли тут сделать белый фон для косого блока со ссылками-ромбами, чтобы он просто перекрывал синий фон предыдущей секции?

Почему рамка с градиентом отображается точками в углах?

Можно добавить эту единичку в сам шортхэнд, сразу после закрывающей скобки градиента. В современных браузерах можно вообще обойтись одним шортхэндом, border-image: linear-gradient(...) 1 / 7px; (безразмерная цифра до слеша — border-image-slice, размерность после слеша — border-image-width). и обойтись без отдельного невидимого border-а. Но для совместимости с более старыми версиями лучше его оставить.

Как передать background-gradient в JQuery?

Или просто точку с запятой в конце значения атрибута уберите :)

Почему блок с outline не слушается z-index?

The stacking of the rendering of these outlines is explicitly left up to implementations to provide a better user experience per platform.

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

С учетом вышесказанного в спецификации, посоветую делать статичную рамку бордером или (на крайняк) фоном. Outline всё-таки именно для динамического выделения, при фокусе и т.п.

Можно ли кастомизировать оформление content для li::before?

А что за шрифт? И не вырезаны ли из него цифры?

Почему не отрабатывается :hover для svg?

Точнее сказать, при вставке через `<img>` SVG-документ теряет интерактивность. Размеры собственного контейнера (для `@media`) он считать еще может, но вот на `:hover` и прочие действия юзера уже не реагирует. Но будет реагировать, если вставлять через `<object>`. Ну и если писать инлайново, само собой)

Я в ступоре - откуда вылезла эта полоса, как ее убрать?

Ссылка больше не работает? У меня по ней открывается только заглушка от surge.sh...

Как сделать нормальный wrap на flexbox?

Нужно примерно такое поведение?

Блок с margin-top отталкивается не от родителя?

Плюсы и минусы большинства известных науке костылей можно сравнить в этой таблице: css-live.ru/articles-css/clearfix-block-formatting... (особенно последняя группа).

Блок с margin-top отталкивается не от родителя?

Границы и паддинги дочернего элемента схлопыванию марджинов с родительскими не помеха. Вот если бы эта граница была у родителя, тогда да, схлопывание бы прекратилось.

Css grid vs flexbox vs float?

KorniloFF, глобальный процент «юзверей» браузеров, не поддерживающих флексбоксы ни в каком виде — три с небольшим. В рунете — того меньше. Именно потому, что мы пишем для людей, большинство не должно страдать из-за причуд крошечного меньшинства с антикварным софтом, получая ненадежную костыльную верстку вместо надежной и быстрой.

Css grid vs flexbox vs float?

Именно хром, не "Android Browser"? Во-первых, он в любом случае поддерживает старую реализацию (`display:-webkit-box` и т.п.). Во-вторых, такие версии хрома уже музейная редкость, независимо от величины города, и стремительно вымирают, случайно купить новый телефон с таким хромом уже нереально.

Css grid vs flexbox vs float?

Кто поставил плюс этой дезинформации? Флексбоксы работают в 98% браузеров, включая мобильные (даже в Опере Мини). А флоаты и неизбежные при верстке на них "клирфиксы" — одна из самых сложных, недоспецифицированных и потенциально багоопасных областей в CSS.

Css grid vs flexbox vs float?

Привет гостю из прошлого! Браузеры без поддержки флексбоксов с долей больше полупроцента — в студию!