Есть блок, ему задан skew(30deg) , в нем есть картинка, чтобы ее не косило, задал ей skew(-30deg) , но есть одно но, она не растягивается во весь блок... Сделать картинку псевдоэлементом не получится, это слайдер.
Вот что имею:
<div class="your-class">
<div class="wrap-img">
<div class="skaw-img">
<img src="img/brand1.jpg" alt="">
</div>
</div>
<div class="wrap-img">
<div class="skaw-img">
<img src="img/brand2.jpg" alt="">
</div>
</div>
<div class="wrap-img">
<div class="skaw-img">
<img src="img/brand3.jpg" alt="">
</div>
</div>
</div>
.wrap-img {
width: 100%;
height: 100%;
}
.skaw-img img {
width: 100%;
height: 100%;
transform: skewX(30deg);
transition: all .5s;
object-fit: cover;
}
.skaw-img {
width: 25%;
height: 100%;
margin: 0 auto;
transform: skewX(-30deg);
transition: all .5s;
cursor: pointer;
overflow: hidden;
}