Как сверстать такие элементы (текст, через буквы которого видна картинка; кнопка, внутри неё стрелка, которая выходит за границу кнопки)?

Question

[konstant1n13]

Всем доброго времени суток!

Как сверстать такие элементы:

1. Первые буквы текста другим цветом выделены (логотип Active Trust)
2. Текст, через символы которого видна картинка (Заголовок Active Trust идёт после "Digital-агенство")
3. Неполное подчёркивание Заголовка Active Trust (вроде border-bottom не подходит).
4. Текст, загнутый в круг, через символы которого видная картинка (во втором блоке Digital-агенство Active Trust)
5. Кнопка, внутри которой картинка или символ стрелки, конец которой выходит за пределы этой кнопки.

Answer 1

[Михаил Шведков]

svg + css + html
1. ::first-letter
2. https://codepen.io/phpcodertech/pen/ZEQYBgQ
3. ::afer
4. https://css-tricks.com/snippets/svg/curved-text-al...
5. ::after, ::before и иже с ними

Вообще, вариантов реализации каждого вопроса более 1. Рекомендую как всегда курить спецификации - mdn хотя бы. Ответы взял не из головы, а из гугла - если там не забанили, можно посмотреть)