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

Ankhena, Кстати, тот пример со срезанными закругленными углами (https://jsfiddle.net/Ankhena/1hu9ot0q/1/) можно еще реализовать маской с одним радиальным градиентом https://codepen.io/xdevelx/pen/rNEOLZb

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, Ну тогда только остаётся множественный mask-image

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, И здесь судя по рисунку может подойти вполне border-image. С ним как раз углы фиксированные будут а части между углами растягиваются.

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, Маски mask-image могут быть множественные как и background-image. К примеру 4 фиксированного размера - через mask-position. И одна с адаптивными размерами. Возможно придётся применять mask-composite. Можно и одной маской сделать, но при изменении ширины и высоты элемента пропорции углов будут меняться, что может не устроить.

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, А кто мешает использовать css маски, у которых есть и размер, и position? В более сложных случаях с масками можно и композицию задействовать, если надо чтобы какая то часть фиксировано обрезалась а остальное тянулось.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena,
1 — минимальный размер в оригинальном примере не 1020px. У img min-width: auto (а это ее intrinsic ширина 640px)
2 — у автора вопроса картинка на ширинах вьюпорта примерно 880px-700px перестает сжиматься меньше 640, а при меньших вьюпортах начинает работать ограничение max-width: 100% и она сжимается дальше
3 — Ну и собственно все работает в соответствии со спецификацией, которая говорит:

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

https://drafts.csswg.org/css-flexbox/#flex-common
4 — я тоже могу создать пример изображения с внутренним размером больше контейнера и естественно не будет видно ограничение по минимальной ширине, так как сразу же будет ограничение по max-width (да и max-width не всегда прописано)
5 — в спецификации сказано, как сделать, чтобы img в обертке и без вела себя одинаково
6 — если все так же не видите ограничения по min-width для изображений, напишите свою версию разного сжатия в обоих случаях. А самое главное, почему при обнулении min-width поведение в обоих случаях одинаковое?

Почему изображение (img) в flex-контейнере ведет себя "странно"?

redfoxy19733, У текста - не сожмется меньше, чем самое длинное слово
У изображения - не будет сжиматься меньше собственной ширины, пока не дойдет уже до ограничения max-width (если max-width нет, то так и останется с внутренней шириной)
Как одно из решений устанавливать точечно min-width: 0 и для текста overflow-wrap: break-word; (чтобы прям длинные слова переносить)
Ну и про медиа запросы не забывать

Такое поведение у флекс элементов, чтобы они бесконечно не сжимались, в какой то момент просто произойдет переполнение. Поэтому и устанавливается min-width auto вместо 0.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena,

Что картинка не уменьшается меньше родной ширины - не вижу.

Я такого и не утверждал - я сказал, что она упирается в это ограничение пока позволяет ширина контейнера.

К примеру, при ширине вьюпорта 880px ширина img упирается в ограничение и ее ширина 640px, при ширине вьюпорта 700 - она все так же остается шириной в 640px. В этом диапазоне она банально перестает сжиматься, пока позволяет ширина обертки (далее уже ограничение по максимальной ширине max-width: 100% позволяет больше сжиматься). В то же самое время при тех же вьюпортах изображение в div продолжает равномерно сжиматься. В этом и есть разница при сжатии в обеих случаях, на которую указал автор вопроса. И эта разница в сжатии устраняется только min-width: 0 для img — в таком случае отличий не будет.

Скриншоты были сделаны на ширине вьюпорта 731px и там видно ограничение ширины из-за min-width: auto.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena, В урле ещё есть dpr 2, если файл открыть в браузере, то ее ширина 640px. Без обертки img сжимается до 640px и на этой ширине фиксируется, пока позволяет место в контейнере. Когда img становится flex элементом, у нее min-width меняется с 0 на auto. В данном случае она сжимается до 640 пока позволяет ширина flex контейнера.
В случае с оберткой у img min-width 0, поэтому в двух случаях она сжимается по разному. С оберткой у нее нет ограничения по минимальной ширине.

Devtools firefox хорошо показывает эту разницу. Скриншоты выше.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena,

Про 640 не очень поняла откуда они.

Да размеры у изображения 640 x 424 - поэтому min-width 640px

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Если нужно, чтобы изображение и без обертки сжималось без ограничений, то придется обнулить у него минимальную ширину

.card-image {
  min-width: 0;
}

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena,

Во втором случае выбор между картинкой с указанной в px шириной и текстом. Текст успешно сжимается.

Так во втором случае не важно, что у нее указана ширина в 1020px. Изображение тоже будет сжиматься, но до минимального размера. У img есть intrinsic size — в данном случае 640 x 424.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Вот изображение в div



А вот без обертки



Я думаю, что откуда взялся минимальный размер у изображения в 640px понимаете?

Как связать nth-child и css переменные, т.е. прописать типа nth-child(n + var(--n))?

Note: Variables do not work inside media queries and container queries. You can use the var() function in any part of a value in any property on an element. You cannot use var() for property names, selectors(!!!), or anything aside from property values, which means you can't use it in a media query or container query.

https://developer.mozilla.org/en-US/docs/Web/CSS/U...

Как правильно задать градиент?

Так это же скорее всего diamond или angular gradient. Не знаю зачем он в фигме и зачем веб дизайнеры его выбирают. В css такого градиента нет.

Почему при скролле Yandex-браузер тупит?

Так закомментируйте в js обработчик scroll и протестируйте. Сразу поймёте, что в нем проблема.
И никакой это не баг, и проявляется не только в яндекс браузере.

У вас в коде есть console.log("Down"); и console.log("Up"); — расскоментируйте их, откройте консоль и посмотрите, что происходит при скроле.

Как реализовать обтекание текстом кнопки, когда текст и кнопка разные элементы?

А не напомните, какое значение display по умолчанию установлено браузерами для button?

В чем разница между word-break: break-word и word-wrap: break-word?

word-wrap не стандартное свойство — вместо него overflow-wrap (overflow-wrap IE не поддерживает)
значение break-word для word-wrap тоже нестандартное и поддерживается только webkit/blink браузерами

Поэтому стоит рассматривать разницу между word-break: break-all и overflow-wrap: break-word
Вот пример:

https://codepen.io/xdevelx/pen/jOoPzOb

Как поместить картинку рядом с текстом?

Илья, Без примера кода на codepen никто не будет гадать, что за фон и куда он исчезает.

Как поместить картинку рядом с текстом?

https://developer.mozilla.org/ru/docs/Web/CSS/float