Card demo

by ffMathy

HTML

<div class="page">

  <div class="fold">
    <img src="https://twistedsifter.files.wordpress.com/2015/11/photoshopped-animal-hybrids-11.jpg?w=800&h=500" />
    <img src="https://i.ytimg.com/vi/r-31HmkN_4o/maxresdefault.jpg" />
    <img src="https://i.ytimg.com/vi/zeLMWWrijV8/maxresdefault.jpg" />
  
    <svg viewbox="0 0 100 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
      <path d="
           M 0,0
           C 0,100
             100,100
             100,0 
           L 100,100
           L 0,100
           Z"/>
    </svg>
    
    <div class="fill">
    
    </div>
  </div>

</div>

CSS

.page {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.fold {
  width: 100%;
  position: relative;
}

  .fold > * {
    position: absolute;
    left: 0;
    top: 10px;
  }

  .fold svg {
    width: 100%;
    height: 20px;
    top: 50px;
    fill: #DDD;
  }

  .fold img {
    width: 100px;
    height: 150px;
    
    border-radius: 5px;
    
    left: calc(50% - 50px);
    transform-origin: 50% 100%;
    
    border: 1px solid black;
  }
  
    .fold .fill {
      background-color: #DDD;
      height: 75px;
      top: 125px;
      width: 100%;
    }
  
    .fold img:nth-child(1) {
      transform: translate(50px, 0px) rotateZ(-20deg);
    }
  
    .fold img:nth-child(2) {
      transform: translate(0px, 0px) rotateZ(-20deg);
    }
  
    .fold img:nth-child(3) {
      transform: translate(-50px, 0px) rotateZ(-20deg);
    }