Как сделать обтекание текста / блоков с необычной формой?
Подскажите в какую сторону нужно копнуть, чтобы реализовать вот такое обтекание со скруглением (см. скрин). Может где-то кто-то видел подобное и есть примеры.
Дополнительно:
Ответы:
Для этого существует свойств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
- Спасибо! Про эти свойства знаю и видел реализацию. Не очень понимаю как сделать скругления заголовков внутри т.к. в дальнейшем это планируется анимация. Вот анимированный пример на dribbble: https://dribbble.com/shots/19997553-365MAG
- Don Puh, Скругления даст вам clip-path. Почему-то мне кажется, что в примере форма заранее подогнана вручную под определенный фиксированный текст, который уже потом просто появляется при помощи анимации. Т.е. сначала анимируется закругленная форма объекта, подгоняется под заранее выбранный текст, а потом этот текст просто появляется.
На stackoverflow есть подобное решение, есть нюансы, но очень похоже: https://ru.stackoverflow.com/questions/1117903/%D0...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания обтекания текста или блоков с необычной формой на веб-странице можно использовать CSS свойство shape-outside. Это свойство позволяет задавать форму для обтекания содержимого, а не только прямоугольную область.
Для начала, нужно создать форму, которую вы хотите использовать для обтекания. Например, вы можете создать круглую форму с помощью свойства border-radius или использовать SVG для создания более сложных форм.
Затем, примените свойство shape-outside к тексту или блоку, который вы хотите обтекать этой формой. Например, если у вас есть блок с классом "text-block" и вы хотите обтекать его круглой формой, вы можете сделать следующее:
.text-block { shape-outside: circle(50%); float: left; width: 200px; height: 200px; margin-right: 20px; }
В этом примере мы задаем круглую форму с радиусом 50% от ширины и высоты блока. Затем мы используем свойство float: left; чтобы блок обтекался текстом справа.
Таким образом, вы можете создать обтекание текста или блоков с различными формами, делая вашу веб-страницу более креативной и интересной для пользователей.