Как сверстать элемент в виде буквы с background-image?
Можно сделать обычный текст с подложенной под него картинкой, типа так:

background: url(...);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
я бы создал один большой треугольник средствами css, как раз там на дивах его можно сделать играясь с transparent сторон. диву большого треугольника  задал бы бэкграунд , потом внутри бы большого тругольника расположил положил бы и спозиционировал бы маленький белый треугольник и трапецию внизу))
я начинающий  верстак) и такой предлагаю изврат)