DIV с резными краями. CSS

by Denis Tverdokhlebov

HTML

<div class="box"></div>

CSS

body {
  background-color: #f3f0cd;
}

.box {
  position: relative;
  
  height: 70px;
  
  background-image: url(http://psd-stock.ru/uploads/article/all-5-icon-patterns.jpg);
  background-size: cover;
}

.box:before {
  content: '';
  
  display: block;
  height: 1em;
  
  position: absolute;
  bottom: -.5em;
  left: 0;
  right: 0;
  
  background-image: radial-gradient(circle, transparent 70%, #f3f0cd 70%);
  background-size: .7em 1em;
  background-position: 0 -.5em;
}