Как сверстать картинку с текстом в таком формате, что бы она не выходила за приделы темного фона(темный фон через transform сделал)?

Question

[Анатолий Пажин]

Должно быть так

Возможно я не правильно сделал темный фон. картинку разместил но она вылазит за пределы своего блока, а нужно что бы она под углом обрезалась. Нужно сделать как на фото. Вот код.
Уже два дня мучаюсь.


Решил вопрос. Картинке с текстом дал такой же трансформ что и всему блоку а потом выровнял overflow: hidden

Comments

[Hyubert]

темному фону overflow: hidden

[Hyubert]

и тексту давайте обратный transform

Answer 1

[Сергей Горячев]

overflow: hidden

Comments

[Анатолий Пажин]

я темный фон через before сделал, там не работает

[Сергей Горячев]

Анатолий Пажин: так сделай наоборот, белый треугольник через after.

[Сергей Горячев]

Анатолий Пажин: собственно, как я и отвечал в прошлом твоем вопросе https://jsfiddle.net/webirus/mrfz3hmu/

[Анатолий Пажин]

пробовал, не работает с картинкой вместо блока.

[Сергей Горячев]

Анатолий Пажин: тогда через z-index поднимай белый блок с треугольником. Хотя хз, что у тебя не работает, у меня всё работало в примере.

[Сергей Горячев]

Анатолий Пажин: картинку заблочить можно, для верности, по идее и без этого должно работать.

[Анатолий Пажин]

белый блок едет на больших экранах