У меня 5 перекошенных строк.
В трех из них должно появиться нескошенное фоновое изображение со ссылкой, когда-то наведенной.
На данный момент есть несколько проблем сэта реализация:
1). Когда курсор мыши находится над текстовым блоком или значком Font Awesome - фоновое изображение скрывается.Это естественно, потому что текстовый блок находится над интерактивной областью, но я не нашел хорошего решения, чтобы это исправить.
2). Незначительная проблема - обнаруженное фоновое изображениеэлементы текстового блока перекошены.Они должны быть прямыми без прикладного преобразования.
Рабочий пример здесь
Разметка:
<div class="oblique-block">
<a href="#" title="Meet the creators" target="_self">
<div class="oblique first">
<span class="fa fa-users fa-inverse fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Meet <br /> us</span>
</div>
</a>
<a href="#" title="Cars that found homes" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-clock-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Lorem <br /> ipsum</span>
</div>
</a>
<a href="#" title="Check out the “a”list" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-heart-o" fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Check the <br /> lorem ipsum</span>
</div>
</a>
<a href="#" title="Dipsum" target="_self">
<div class="oblique">
<img src="https://via.placeholder.com/365x458" />
<span class="fa fa-map-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">ipsum <br /> loremipsum</span>
</div>
</a>
<a href="#" title="Get in touch with us" target="_self">
<div class="oblique last">
<span class="fa fa-comment-o fa-3" aria-hidden="true"> </span>
<span class="fa-text text-uppercase">Get in touch <br /> with us</span>
</div>
</a>
</div>
CSS :
.oblique img {
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
z-index: 100;
}
.oblique img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.oblique img:hover ~ .oblique{z-index:-100!important;display:none!important!;}
.oblique-block {
/*width: 100%;*/
height: 500px;
margin-left: 100px;
}
.oblique {
width: 20%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.oblique-block > a:nth-child(even) > div:nth-child(1) {
background: #E0AE51;
}
.oblique-block > a:nth-child(odd) > div:nth-child(1) {
background: #65C7CC;
}
.oblique.last {
background: #65C7CC;
}
.oblique.last:after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.oblique.first:before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #65C7CC;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.oblique .fa{
font-size: 40px;
font-style: normal;
color: #fff;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.oblique .fa-text{
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
margin-top: 20px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
line-height: 33px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.oblique.last .fa-text{z-index:5;}
макет : сверху макет без эффекта наведения, снизу с эффектом наведения 
UPD: С помощью решения Оливера я достиг цели.Но осталась одна проблема: шрифт Awesome, текст и открытое изображение перекошены, тогда как они должны быть прямыми.
UPD2 Решено с применением многократного преобразования transform: translate(-50%, -50%) skewx(10deg);