Как посредством CSS сделать «срез» верхней и нижней границы background?

Question

[Вениамин Смирнов]

Привет!

Для примера покажу картинку:


Видите небольшие срезы верхней и нижней границы? Высота от верхней границы до точки среза: 50 пикселей. Как это реализовать посредством CSS? Не хочется грузить картинку.

Answer 1

[Антон Нагаец]

jsfiddle

Comments

[Вениамин Смирнов]

Круто, огромное спасибо!

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

Через спрайтшиты, наверное, не пойдет, ибо ширина элементов 1920 пикселей.

[Антон Нагаец]

Ingword: доделал. Убрал второй див и осталось только на пседвоэлементах https://jsfiddle.net/gr1mm3r/c4g0ux7a/2/

[Вениамин Смирнов]

Антон Нагаец: спасибо огромное! Думаю, лучше 1 класс и 2 псевдоэлемента, чем подгрузка по 2 изображения на каждый блок :)

[Антон Нагаец]

Ingword: проблема одна будет, фиксированная высота объекта, 2 дива решают эту проблему. Какое решение использовать решать Вам.

Answer 2

[Константин Величко]

Для однотонного цвета достаточно before и after. Для картинки clip-path.

Comments

[Вениамин Смирнов]

Дык а как наклонить её через before и after?)

[Константин Величко]

Так например codepen.io/Zoxon/pen/JXoOzx

Answer 3

[weredy]

Можно :before и :after наклонить трансформацией.