Как сверстать блок в форме треугольника с контентом?

Question

[Анатолий Родин]

Помогите разобраться, можно ли сверстать такой блок:

Сама картинка идет как фон.

Внутри будет контент и он же будет прижат к левому краю.

Можно ли сделать такую форму средствами CSS?

Answer 1

[Serj-One]

Блок с overflow:hidden, повёрнутый через transform. Внутри блок с фоновым изображением и контентом, повёрнутый обратно, чтоб компенсировать изначальный поворот. Чтоб выравнять нижнюю границу, можно завернуть это в ещё один блок с overflow:hidden.

Comments

[Анатолий Родин]

Спасибо, все получилось)

[Анатолий Родин]

Serj-One, еще вопрос: как выравнивать текст по наклонной линии в этом блоке? Надо чтобы текст прилегал к левому краю.

Answer 2

[sergski]

На css можно — shape-outside, но он не поддерживается firefox: caniuse.com/?comment=#search=shape-outside
Технология описана тут, даже пример с треугольником)