倾斜不全角的两列布局

Question

我的三个特征三列部分的列可能有些倾斜，但是我的设计不是100％匹配，这怎么可能？任何人都可以帮助我。

我的示例代码在这里

<div class="container feture-three-columns">
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image2.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
       <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
</div>

我在CSS或HTML代码中有什么问题，请描述一下

.feture-three-columns {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.feture-three-columns .column {
    width: 33.333333%;
    position: relative;
}
.feture-three-columns .img-wrap {
    transform: rotate(-17deg);
}
.feture-three-columns .column  img {
    display: block;
    width: 119%;
    height: auto;
    transform: rotate(17deg) translateX(-83px);
}
.feture-three-columns .column  img.img-mobile { display: none; }

Answer 1

我认为您正在寻找translate: skew。在下面的示例中，我将其添加到您的img-wrap类中并删除了旋转。我还从图像本身中删除了转换。

.feture-three-columns {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.feture-three-columns .column {
    width: 33.333333%;
    position: relative;
}
.feture-three-columns .img-wrap {
    transform: skew(-10deg) translateX(-12%);
}
.feture-three-columns .column  img {
    display: block;
    width: 120%;
    height: auto;
}
.feture-three-columns .column  img.img-mobile { display: none; }

<div class="container feture-three-columns">
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
       <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
</div>