Можно ли сделать закругленное облако с текстом?

Question

[jeruthadam]

Реально ли на CSS сделать так, НО с существенным отличием



Отличие - внутренние углы тоже должны быть загруглены (тут они острые)

АПД: вот пример как надо сделать

Comments

[Rustam Bainazarov]

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

[jeruthadam]

Рустам Байназаров, оборачивать не пробелма (юзаю SplitText), но все равно непонятно как быть с бордер радиусами. Текст же динамический.

[jeruthadam]

Неизвестно строка короче или длиннее предыдущей/следующей

[Rustam Bainazarov]

jeruthadam, да, именно он.

Ну тут тогда только если писать кастомную логику поверх этого.

[jeruthadam]

Рустам Байназаров, ох, мне кажется тогда надо в сторону канваса копнуть. Потому что даже на SVG я не вижу решения.

[Rustam Bainazarov]

jeruthadam, в любом случае JS, к сожалению.

Answer 1

[Aetae]

По обновлённому вопросу svg-фильтр примерно такой:
Цвет увы пока в двух местах задавать придётся, но в принципе если поиграться можно добиться и большего.

Answer 2

[Антон Шаманов]

на чистом css кроссбраузерного решения не добиться

Comments

[jeruthadam]

А что есть не кроссбраузерное решение? Или тоже не добиться?)))

[Антон Шаманов]

jeruthadam, хз, я точно знаю что это не возможно в firefox на чистом css

[Rustam Bainazarov]

Антон Шаманов, если вы про:
https://developer.mozilla.org/en-US/docs/Web/CSS/b...

То Firefox это поддерживает очень давно. Только это не поможет в решении проблемы в любом случае.

[Антон Шаманов]

Рустам Байназаров, да, кэп, но это не тоже самое что на приведенном примере

[jeruthadam]

Антон Шаманов, так кэп, тогда и НЕ кроссбраузерного решения нету.

[Антон Шаманов]

jeruthadam, а вот это как раз не факт - возможно в каком-то браузере и можно добиться подобного чистым css.

[Rustam Bainazarov]

Антон Шаманов, в каком смысле кэп, когда это вообще нельзя сделать на CSS в любом браузере? Или есть какое-то иное свойство, которое позволит реализовать это?

[jeruthadam]

Антон Шаманов, мне нравятся твои ответы. Может и можно, а может и не можно. Кто знает? Но главное написать это.

[Антон Шаманов]

Рустам Байназаров https://caniuse.com/
jeruthadam если исходить из того что кроссбраузерного решения нет, то смысла рассматривать побраузерно тоже нет, будь ты чутка поумнее перешел бы к вопросу "а как тогда это реализовать?".

[Антон Шаманов]

Рустам Байназаров, браузеры по разному отображают элементы, возможно какой-то браузер и позволяет с помощью box-decoration-break добиться такого результата, но ff точно нет.

[jeruthadam]

Антон Шаманов,

будь ты чутка поумнее

сказал человек, который вообще не понимает что тут происходит. тебе 2 челвоека говорят, что box-decoration-break не решает проблемы внутренних закруглений, но ты вообще не представляешь как оно работает, только читал об этом где-то когда-то.

[jeruthadam]

Антон Шаманов,

браузеры по разному отображают элементы, возможно какой-то браузер и позволяет с помощью box-decoration-break добиться такого результата, но ff точно нет

ты настолько никакой, что даже не знаешь что box-decoration-break в ff поддерживается также как и в хроме. ты отстал от жизни.

[Rustam Bainazarov]

Антон Шаманов, будь вы «чутка поумнее», то знали бы, что это сделать исключительно на CSS нельзя в абсолютно любом браузере. И да, я этой задачей уже озадачивался.

Но вы не «чутка поумнее», поэтому написали невалидный ответ, т. к. это нельзя сделать ни в одном браузере. Т. е. это невозможно на CSS в принципе на данный момент.

Либо покажите, пожалуйста, код, который бы делал это хоть в каком-то браузере. Буду признателен.

В целом, советую перестать устраивать детский сад с личностями, ресурс не для этого предназначен. Он предназначен для обсуждения. Как вы видите, я на колкости не переходил до момента ваших слов о «чутка поумнее».

[Антон Шаманов]

Рустам Байназаров, то есть кто-то решит создать браузер, то он не имет права реализовать подобный вид box-decoration-break потому как ты так решил? :)

[Rustam Bainazarov]

Антон Шаманов, это здесь при чем вообще? Я буду только рад, если это будет реализовано хоть кем-то и где-то.

Вопрос в том, как это реализовать с текущими технологиями.

Если вы говорите, что «кроссбраузерного решения не добиться» — это означает, что есть не кроссбраузерное решение. И прямо сейчас. А его нет.

Сарказм, ирония и троллинг здесь не к месту и не по делу.

Answer 3

[Преподаватель программирования]

Можно сделать так:

1) сначала создаются флекс-блоки, для каждого слова свой span
2) вычисляются размеры всех блоков и координаты углов
3) по этим координатам строится svg-путь, который заливается градиентом

Comments

[jeruthadam]

А свгшка получившаяся абсолютом на подложку? Но все равное неясно как програмно у свгшки такие закругления делать.

[Преподаватель программирования]

да, весь блок текста это флексбокс-контейнер, слова в нем это span-блоки, и фоном svg

чтобы рисовать svg надо изучить этот язык
это как рисовать кривые в иллюстраторе
программно рисуешь кривую по точкам