Как сверстать скошенные углы секций без использования clip-path?

Question

[Dymok]

Есть простая верстка секции со скошенными верхним и нижним углами: https://codepen.io/UnluckySerivelha/pen/zmzjEZ
Сейчас сделал их с помощью clip-path, но он имеет не очень хорошую поддержку браузерами.
Есть ли способ реализовать это по-другому?
Но before и after не подойдут, т.к. на скошенных углах должны находиться элементы дизайна (как background в примере).
Спасибо (:

Answer 1

[profesor08]

• Можешь задать линейный градиент, а потом масштабировать его.
  
• Или использовать :before, :after, задать им фон, наклонить, отцентрировать.
  
• Или трансформировать контейнер с помощью skew, а потом его содержимое тоже трансформировать с помощью skew в обратную.
  
• Или задай фон svg картинкой.
  

Comments

[Dymok]

Спасибо за ответ, третий способ почти подошел, но есть проблема - если задавать background-image для контейнера со скошенными таким способом углами, то и background деформируется (пример). Есть способы это поправить?

[profesor08]

Dymok, задай его дочернему элементу

[Dymok]

profesor08, а если фоновое изображение должно быть на всю высоту родителя?

пример

Если задать внутреннему элементу обратный skew, то секция будет уже не скошенная :(

[profesor08]

Dymok, растяни дочерний элемент на всю ширину контейнера, задай ему обратный skew, а контейнеру overflow: hidden.

[Dymok]

profesor08, вроде бы то, что нужно, спасибо)