Как реализовать обрез буквы?

Question

[Марк Цукенберг]

Помогите реализовать или подкинет идет как сделать. (Нужно сделать такой срез буквы как в слове: Путешествие) Я смог сделать градиент и пытался через radial сделать срез но не получилось

.gradient {
    font-family: MuseoSansCyrl700;
    text-transform: uppercase;
    font-size: 4rem;
    background: radial-gradient(circle at top right, transparent 15px, #FF4200 0) top right;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Макет как должно получиться

Comments

[Антон]

Повесить блок с планетой z-index'ом выше, чем буквы.

[Марк Цукенберг]

Антон, планета это фон. (Не я делал макет это тестовое задание)

[Антон]

Марк Цукенберг, Можно элементами наркомании
https://jsfiddle.net/hndxyfgL/

[Марк Цукенберг]

Антон, у меня нужные буквы обрезаются

[Антон]

Марк Цукенберг, А вот нужные координаты вы уже должны сами подправить

[RAX7]

Марк Цукенберг, https://codepen.io/anon/pen/rQbPRy?editors=1100

Answer 1

[Даниил Кириллов]

Сделать картинку поверх текста, лучше всего через z-index

Answer 2

[Тимур Карагулов]

через svg легко даже градиент сделать, не то что обрезание. с адаптивом только придется повозится при таком раскладе

Comments

[Niriter Inc.]

Ну нахер...


z-index в помощь вместе с background: linear-gradient....