Как вписать текст в фигуру / CSS?

Question

[Евгений Вольф]

Доброго времени суток коллеги!

Задался довольно простым (как мне казалось) вопросом: как вписать текст в фигуру/трапецию? Выглядит она примерно так:

И вроде даже нашел CSS shape-inside, который в целом призван решать эту проблему, но поддерживается он только Chome'ом (и производными), и не поддерживается даже FireFox'ом не смотря на то, что спецификация вышла примерно года 4 назад...

Пробовал решить вопрос по разному, и с помощью SVG и "как-нибудь" ещё... вменяемого эффекта добиться пока не удалось.

Если Вы уже сталкивались с подобной проблемой, подскажите пожалуйста варианты её решения? Может есть какая-то библиотека на JS для IE и FF, решающая данную проблему? Или какие-то другие способы? Не хотелось бы "выкидывать" сразу два браузе из списка поддерживаемых, из-за единственного "эффекта"...

Comments

[Moskus]

Выкинуть нужно не browser-ы, а дизайнера, который это нарисовал.

[Евгений Вольф]

Moskus: я от части с Вами согласен, но с другой стороны, я думаю многие кто занимался вёрсткой помнят "приколы с IE", от поддержки которого в итоге многие дизайнеры (верстальщики) отказались вообще, и MS в виду этого его даже переименовали в "Edge"... Теперь по этому же пути судя по всему собрался идти FireFox, который почему-то игнорирует ряд нововведений W3C, например такие банальные штуки, как поле с типом "выбора даты" ("дата").

P.S. Очень долго пользовался FireFox'ом и сейчас им пользуюсь. Считаю его одним из лучших браузеров в истории. По этому, не сочтите мой эпитет за попытку как-то "обидеть" FireFox.

Answer 1

[ZERGE]

Да как угодно, хоть через position: absolute

Comments

[Евгений Вольф]

А как "position: abosolute" поможет тексту обтекать внутренний контур фигуры? (так же как это позволяет делать "shape-inside", про который я писал выше)