Как сделать такие косые линии?

Question

[Вадим Ягофаров]

Как сделать такие косые линии? Это будет слайдер. Пробовал свойство clip-path: polygon(0 0, 320% -200%, 80% 116%, 0% 80%); но при адаптиве там творится кошмар и настроить под все разрешение не выйдет. как это можно реализовать, буду признателен любой помищи. Если есть примеры и прочие материалы будет здорово, потому что мои поиски не увенчались успехом(((. Слайдер использую бутстрап 4

Comments

[Вадим Ягофаров]

Спасибо всем за помощь, все предложенные решения ботают. Так как это был слайдер при адаптиве творилось ужасное(выговор получил, даже 2). В идеале решилась данная проблема вырезанием данных срезов виде картинки

Answer 1

[Eugene Chefranov]

Также легко можно сделать с помощью псевдоэлементов https://codepen.io/chefranov/pen/VxGOgM

Answer 2

[Ankhena]

Позавчера делала для соседнего вопроса https://jsfiddle.net/Ankhena/bec9qcyy/
Вам только углы поменять.

Comments

[Александр]

Что то на телефонии не работает (

[Ankhena]

Александр, а там картинка не всегда грузится, надо поменять на другую
вот так https://jsfiddle.net/bbjw7h8f/ видно, что уголки работают

Answer 3

[Anton Filippov]

белый свг с пятиугольником

Comments

[Вадим Ягофаров]

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

[Anton Filippov]

Вадим Ягофаров, https://flppv.github.io/int/
ну вот как тут в хиро блоке тоже косые линии с помощью свг сделаны.
Такое можно и градиентами и всякими повернутыми блоками делать, но для респонсива мне удобнее свг, так как его можно удобно тянуть

[Вадим Ягофаров]

Anton Filippov, Спасибо

Answer 4

[Дмитрий]

Пример

Answer 5

[ljutaev]

здратсвуй. решение с применением пару строк css
https://codepen.io/ljutaev/pen/jxQEga