Как сделать одну строну блока под углом (если на фоне картинка)?

Question

[Ivan Stroykin]

Доброго времени суток,

Возник вопрос, как можно сделать так как на примерах ниже:

или


Причем такой угол только с одной стороны (либо сверху либо снизу, с обратной стороны ровно) + у этого блока тень + у этого блока будет фоновое изображение которое нельзя уводить

Answer 1

[Максим Тимофеев]

css transform rotate htmlbook.ru/css/transform
а тень box-shadow htmlbook.ru/css/box-shadow

еще можно посмотреть тут: htmlbook.ru/blog/kak-primenit-transformatsiyu-css3...

Comments

[Ivan Stroykin]

Но ведь тогда у нас поворачивается все вместе? Причем все углы. Тогда уж skewY был бы ближе, но и там 2 стороны (верх + них) да и фон то уходит. Или вы текст под картинками не прочитали?)

[Максим Тимофеев]

Иван Стройкин: Прочитал. Верхняя часть перекрывается предыдущим блоком. И все.

[Ivan Stroykin]

Максим Тимофеев: В общем спасибо что пнули в нужную сторону)
Создал второй блок на который перекинул фон и зал ему position: absolute;
Сделал top: +...; и bottom: -...; (чтобы верхняя часть ушла за верхний блок, а нижняя налезла на нижний блок.
И задал transform: skewY(-2deg);
Все шикарно. Спасибо :)