div {
  position: relative;
  overflow: hidden;
}

/* Using Before/After Elements with borders to create interesting section transitions */ 
div:before,
div:after {
  content: '';
  display: block;
  position: absolute;
}

div:before {
  top: 0;
  left: 0;
  
  /*  Doing each border by hand  */
  border-right: 100vw solid transparent;
  border-top: 20px solid #fff;
  border-left: 100px solid #fff;
  border-bottom: 30px solid transparent;
}

div:after {
  right: 0;
  bottom: 0;
  
  /*  Doing each border by hand  */
  border-left: 100vw solid transparent;
  border-bottom: 20px solid #fff;
  border-right: 40vw solid #fff;
  border-top: 60px solid transparent;
}





/* Reset & other styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  height: 500px;
  margin: 50px 0;
  width: 100%;
  background: url(https://images.unsplash.com/photo-1438201743149-3cc16cd4cddd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=8c30051f6a3896c7f94f463e21e6437c) center no-repeat;
  background-size: cover;
  position: relative;
  padding: 50px;
}

.explanation:before,
.explanation:after {
  border-top-color: red;
  border-bottom-color: green;
  border-left-color: blue;
  border-right-color: yellow;
}