Skew with image

by Wosley Bago

HTML

<div class="bg">

</div>

<div class="bg1">

</div>

CSS

.bg,
.bg1 {
  position: relative;
  display: block;
  height: 100px;
  padding: 20px;
}

.bg {
  background: url('http://i.imgur.com/W27LCzB.jpg') no-repeat center center /cover;
  overflow: hidden;
}

.bg1 {
  background: red;
}

.bg1:after {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  border-left: 30px solid red;
  border-right: 30px solid red;
  border-top: 30px solid transparent;
  z-index: 2;
  margin-left: -15px;
}

.bg:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 30px;
  background: red;
  bottom: 0;
  z-index: 2;
  left: calc(50% + 45px);
}

.bg:after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 30px;
  background: red;
  bottom: 0;
  z-index: 2;
  right: calc(50% + 15px);
}