Как сделать ломаный фон?

Подскажите, пожалуйста, как можно срезать фон вверху и внизу таким образом? Благодарю!
p { display: block; height: 10px; } .cover { width: 100%; height: 250px; background: #ffffff url(http://katyaburg.ru/sites/default/files/pictures/krasota_prirody/les_hvoyniy_foto_02.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }

Ответ

Первый вариант CSS — clip-path
p { display: block; height: 10px; } .cover { width: 100%; height: 250px; background: #ffffff url(http://katyaburg.ru/sites/default/files/pictures/krasota_prirody/les_hvoyniy_foto_02.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-clip-path: polygon(20% 0, 50% 6%, 80% 0, 100% 0, 100% 18%, 80% 18%, 50% 24%, 20% 18%, 0 18%, 0 0); clip-path: polygon(20% 0, 50% 6%, 80% 0, 100% 0, 100% 18%, 80% 18%, 50% 24%, 20% 18%, 0 18%, 0 0); }

Второй вариант SVG — clipPath