Трансформированное изображение?

Question

[Edward]

Как можно сделать такое? Обвел красным.. Не знаю как правильно сформулировать вопрос для Google

Answer 1

[Ivan Bogachev]

Обычно это делают с помощью :before и :after и больших-больших бордеров - можете посмотреть пару демок (1, 2).

Comments

[Ivan Bogachev]

Правда codepen походу упал... /(O_O)\
Ну ничего, поднимется - посмотрите.

[Edward]

У меня получилось сделать такое, но на слайдер это не действует

[Ivan Bogachev]

Эдуард Богач: Без примера с кодом слова "на слайдер это не действует" ни о чем не говорят.

Answer 2

[Ростислав Игнатенко]

Здесь много вариантов.
1) Самый простой, но не самый рациональный. Делаете обычный блок с transform: rotate(10deg), например, но ширину блока задаете не 100% от ширины экрана, а больше. Так же задаете блоку-родителю overflow-x: hidden (здесь главное указать правильно что-бы не появился горизонтальный скролл). Потом этому блоку так же задаете overflow: hidden, и внутрь блока пихаете свою картинку.
2) svg/canvas и рисуете объекты. Мне кажется эти способы более правильны, но потребуют немного больше времени, нежели первый.

Comments

[Сергей delphinpro]

3) относительно простой - псевдоэлемент на заднем фоне с transfrom: skewY()

[Edward]

Сергей: thx, помогло