Трансформировать нижнию границу блока

[Temiks]

Здравстуйте.
Есть задача: повернуть нижнюю часть блока под определнным градусом, пример на картинке

Вместо черного блока будет изображение на всю ширину экрана..
На форуме нашел подобную тему http://htmlforum.ru/index.php?showtopic=52365&hl=%2B%D0%BF%D0%BE%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D1%8C+%2B%D0%B1%D0%BB%D0%BE%D0%BA#entry350534

но есть ли другое решение?

[afdw]

Градиент?

[Temiks]

Градиент?

А как градиентом такое реализуешь? Не факт же, что во втором блоке не будет картинки.. то есть второму блоку нужно будет трансформировать верхнюю и нижнюю границу.

[Vlad]

Типа так через градиент.

http://jsfiddle.net/5x8Lqt7v/

[Temiks]

Типа так через градиент. http://jsfiddle.net/5x8Lqt7v/

Спасибо, что пытаетесь помочь, но в вашем примере пустой блок без изображения. Изменил на свое изображение - тоже самое, ничего нету

[Vlad]

Т.е. уголок должен быть другим изображением?

[Temiks]

Т.е. уголок должен быть другим изображением?

Нужно вот такое. Что бы блоки были независимыми (картинку привел как пример того, что я хочу получить от блоков)

Edited August 24, 2015 by Temiks

[Vlad]

Через трансформацию можно получить.

http://jsfiddle.net/0o7gtLkj/

[Temiks]

Через трансформацию можно получить. http://jsfiddle.net/0o7gtLkj/

Спасибо за помощь, а если в блоке не картинка, а фон? В блоках так же есть текст, кнопки, таблицы и так далее, обычный контент.. Высота блока неизвестна

Edited August 24, 2015 by Temiks

[Vlad]

Ширина то хоть известна?

[Temiks]

Ширина то хоть известна?

Да, вся ширина экрана

[Vlad]

У вас слишком много "если" в этой задаче. Лично мне не очень понятно что должно происходит с блоком2 если контента в первом блоке много и тому подобные вопросы. Вот вам основа, сами дальше решайте что с этим делать.

 

http://jsfiddle.net/0o7gtLkj/1/

 

Фон добавляется через стили, второй фон через ::after и трансформируется.