我有一个小问题。我正在尝试制作图像的结构。我有CSS和HTML。
.mask-skew {
transform: skewX(-10deg);
/*width: 300px;*/
height: 390px;
overflow: hidden;
margin: 5px;
/*border: 2px solid orange;*/
}
.art-skew {
transform: skewX(10deg);
position: relative;
left: -50%;
}
<div class="row flex--row advertising-row">
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
</div>
</div>
我该如何获得第一张图片的结果。左右两边的图像有直边。