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

Question

[Don Puh]

Подскажите в какую сторону нужно копнуть, чтобы реализовать вот такое обтекание со скруглением (см. скрин). Может где-то кто-то видел подобное и есть примеры.

Answer 1

[Виктор Кожухарь]

Для этого существует свойствa clip-path и shape-outside.

Вот описание и примеры:
https://css-tricks.com/almanac/properties/c/clip-path/
https://css-tricks.com/almanac/properties/s/shape-...
https://codepen.io/yoksel/pen/KKKYNPg

Comments

[Don Puh]

Спасибо! Про эти свойства знаю и видел реализацию. Не очень понимаю как сделать скругления заголовков внутри т.к. в дальнейшем это планируется анимация. Вот анимированный пример на dribbble: https://dribbble.com/shots/19997553-365MAG

[Виктор Кожухарь]

Don Puh, Скругления даст вам clip-path. Почему-то мне кажется, что в примере форма заранее подогнана вручную под определенный фиксированный текст, который уже потом просто появляется при помощи анимации. Т.е. сначала анимируется закругленная форма объекта, подгоняется под заранее выбранный текст, а потом этот текст просто появляется.

Answer 2

[Don Puh]

На stackoverflow есть подобное решение, есть нюансы, но очень похоже: https://ru.stackoverflow.com/questions/1117903/%D0...