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

#css #css3

Подскажите, пожалуйста, как можно срезать фон вверху и внизу таким образом? Благодарю!



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;
}








    

Ответы

Ответ 1

Первый вариант 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: