Paralellogram shelf

Paralellogram shelf

by Csaba Hellinger

HTML

<div class="container">
  <div class="item">
    <div class="item-image"></div>
  </div>
  <div class="item">
    <div class="item-image"></div>
  </div>
  <div class="item">
    <div class="item-image"></div>
  </div>
</div>

CSS

.container {
  display: flex;
  background: gray;
}

.item {
   width: 150px;
   height: 100px;
   transform: skew(20deg);
   background: red;
   margin: 0 0.2rem;
   position: relative;
   overflow: hidden;
 }

.item-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  transform: skew(-20deg);
  background: url(https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg) 50% 50% / cover;  
}