Как сделать кривой бордер у блока?

Question

[Кирилл]

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


То что сам надумал, но блоки получается выходят за пределы страницы.... https://jsfiddle.net/8b47s1nt/

Answer 1

[Алексей Скляров]

https://css-tricks.com/clipping-masking-css/

Comments

[Никита Кит]

ты на поддержку смотрел??? такое недопустимо в продакшен.

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

Никита Кит: Тогда картинкой, 100% поддержка.

[Никита Кит]

Sergey Goryachev: я ответил ниже как это делать правильно и не картинкой

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

Никита Кит: ответил - это громко сказано. высказал мнение - да, ответил - нет.

[Никита Кит]

Sergey Goryachev: Ответил, а не высказал. Мнение изливаешь сейчас ты и на него всем абсолютно по*

Answer 2

[Никита Кит]

Сделай двумя псевдоэлементами в абсолюте, относящимися к родителю и разверни их через transform rotate.

Comments

[Кирилл]

я вроде так и делал, за исключением псевдоэлементов, но как они здесь могут помочь? у меня возникает проблема с шириной

[Никита Кит]

Кирилл: codepen.io/anon/pen/YZJdZa
вот так надо. юзай проценты при абсолюте. иначе плакать будет твой адаптив

Answer 3

[Stalker_RED]

Треугольники в css можно сделать и при помощи border.
https://jsfiddle.net/kokcys9z/

https://css-tricks.com/snippets/css/css-triangle/

Comments

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

А если ширина блока не известна?

[Кирилл]

Спасибо, но как быть с адаптивностью при таком решении?

[Stalker_RED]

Кирилл: адаптивно тоже можно, если чуток заморочиться https://jsfiddle.net/3HG6d/3595/

[Stalker_RED]

Кирилл: на основе https://jsfiddle.net/3HG6d/

[Danila]

Кирилл: codepen.io/DNLHC/pen/RpeExY?editors=1100
можно еще свгшкой