Я знаю, что на этот вопрос уже был дан ответ, однако это было для нижней части div, и я не могу понять, как сделать это для левой и правой части div.

Я пытаюсь добиться того же эффекта, что и этот:

BODY {
  background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}
#wrapper {
  overflow: hidden;
  height: 116px;
}
#test {
  height: 100px;
  background-color: #ccc;
  position: relative;
}
#test:before {
  content: "";
  position: absolute;
  left: -6px;
  width: 50%;
  height: 16px;
  top: 100px;
  background-color: #ccc;
  -webkit-transform: skew(-40deg);
  -moz-transform: skew(-40deg);
  -o-transform: skew(-40deg);
  -ms-transform: skew(-40deg);
  transform: skew(-40deg);
}
#test:after {
  content: "";
  position: absolute;
  right: -6px;
  width: 50%;
  height: 16px;
  top: 100px;
  background-color: #ccc;
  -webkit-transform: skew(40deg);
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);
  -ms-transform: skew(40deg);
  transform: skew(40deg);
}

<div id="wrapper">
  <div id="test"></div>
</div>

Но с вырезанным наоставил и еще один с вырезом направо.