Как сверстать элемент в виде буквы с background-image?

Question

[NewBeHere]

Как сверстать подобный элемент без использования clip-path?

spoiler

Answer 1

[0xD34F]

Можно сделать обычный текст с подложенной под него картинкой, типа так:

background: url(...);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Comments

[NewBeHere]

большое спасибо! Единственная проблема, что в IE11 не работает

Answer 2

[Ivan Bogachev]

Вы там в комментарии написали:

Единственная проблема, что в IE11 не работает

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

Answer 3

[stravinsky]

я бы создал один большой треугольник средствами css, как раз там на дивах его можно сделать играясь с transparent сторон. диву большого треугольника задал бы бэкграунд , потом внутри бы большого тругольника расположил положил бы и спозиционировал бы маленький белый треугольник и трапецию внизу))
я начинающий верстак) и такой предлагаю изврат)