Как сделать закругление текста без JS?

Question

[Daniil]

Всем добрый день. Пытаюсь сделать закругление текста у закруглённого угла картинки.

Можно было бы сделать это с JS , но нельзя по ТЗ плюс сам закруглённый текст будет меняться. Мне посоветовали использовать matrix и skew , но в интернете о них мало информации и не понимаю как это сделать с помощью них. Помогите пожалуйста. Заранее спасибо. Вот ссылка на codepen https://codepen.io/Daniil-chaynik/pen/abWdmqv

Comments

[Владимир]

https://css-tricks.com/snippets/svg/curved-text-al...
https://css-irl.info/positioning-text-along-a-path...

[Василий Банников]

Можно при помощи svg например https://css-tricks.com/snippets/svg/curved-text-al...

[Владимир]

Есть еще вариант задавать transofrm каждой букве, но он не будет работать если текст меняется

[Daniil]

боюсь что способ решения проблемы в виде svg мне не подходит , так как проблемы будут с вёрсткой

[Сергей delphinpro]

Daniil, какие там могут быть проблемы? SVG отлично поддерживается всеми браузерами.

[Aetae]

Сергей delphinpro, ...но не всеми верстальщиками.)

Answer 1

[вовчек]

Каждую букву оберни в span, и к каждой букве давай transform: rotate(-?px), вот здесь более подробнее и понятнее: https://css-tricks.com/set-text-on-a-circle/