<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body{
  background-color: #ff7a00;
/* for centering the .fold-image within body */
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fold-image{
  width:600px;
  height: 400px;
  display: flex;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.fold-image span{
  width: 25%;
  height: 100%;
  background-image: url(https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80);
  background-size: cover;
  box-shadow: inset 20px 0 40px rgba(0,0,0,0.4);
}

.fold-image span:nth-child(odd){
  transform: skewY(18deg);
}

.fold-image span:nth-child(even){
  transform: skewY(-18deg);
}
.fold-image span:first-child{
  background-position: 0;
}
.fold-image span:nth-child(2){
  background-position: -150px;
}
.fold-image span:nth-child(3){
  background-position: -300px;
}
.fold-image span:last-child{
  background-position: -450px;
}</pre></body></html>