Как сделать данный блок не через clip-path?

Question

[olya_097]

Comments

[Flying]

можно через transform: skew, можно через :before и :end добавить отбивки

[olya_097]

Flying, покажете, пример, пожалуйста?

[Flying]

olya_097, вам xdevelx всё подробно описал, однако у transform: skew и у градиента будут проблемы если размер элемента изменяется, можно посмотреть вот здесь: https://codepen.io/FlyingDR/pen/GRJyBdO и здесь https://codepen.io/FlyingDR/pen/abOEjPN. Вариант с треугольниками лучше делать через добавление svg картинок на :before и :after, одну из них лучше переворачивать через transform: rotate()

Answer 1

[xdevelx]

svg, transform: skew, linear-gradient, псевдоэлементы треугольной формы (css triangle) сверху и снизу.
clip-path хоть и не поддерживается IE, но в плане graceful degradation секции банально будут прямоугольными - верстка не развалится.

Answer 2

[Максим]