Div sesgado con imagen

Un modo rápido de hacer ajustes con CSS a divs sesgados o inclinados.

HTML

<div class="divInstagram">
<div class="inclinado">
  <div class="retrato">
  </div>
</div>
<div class="inclinado">
<div class="retrato">
  </div>
</div>
<div class="inclinado">
<div class="retrato">
  </div>
</div>
</div>

CSS

divInstagram {
  background-color: #c9f2e9;
}
.inclinado {
  margin: 5px;
  display: inline-flex;
  background-color: red;
  width: 180px;
  height: 320px;
  transform: skewX(-15deg);
  overflow: hidden;
}

.retrato {
    background-image: url('https://i.ytimg.com/vi/TZiQK81Rjfw/maxresdefault.jpg');
  display: block;
  position: absolute;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  top: 0;
  left: -50%;
  right: -50%;
  bottom: 0;
  transform: skewX(15deg);
}