Tạo đường line chéo ghép hai ảnh với nhau

Mẫu code cách cắt ghép ảnh để tạo ra đường chéo nối giữa hai bức ảnh lại với nhau một cách lạ mắt, cá tính. Toàn bộ code ở bên dưới mình không giải thích nên các bạn chịu khó đọc và suy nghĩ đi nhé.

HTML

<div class="block">
    <div class="block-img1">
        <img alt="" class="img-fit" src="images/girl1.jpg" />
    </div>
    <div class="block-img2">
        <div class="content-img">
            <img alt="" class="img-fit" src="images/girl2.jpg" />
        </div>
    </div>
</div>

CSS

* {margin: 0;padding: 0;}
.block {width: 400px;margin: 50px auto;box-shadow: 0 0 3px #5ec3ad;}
.img-fit {object-fit: cover;display: block;max-width: 100%;}
.block-img1 {width: 100%;height: 500px;overflow: hidden;position: relative;z-index: 1;}
.block-img1:before {content: '';position: absolute;bottom: 0;right: 0;border-style: solid;border-width: 0 0 303px 400px;border-color: transparent transparent #fff transparent;}
.block-img2 {width: 100%;height: 500px;position: relative;z-index: 2; overflow: hidden;margin: -225px 0 0 0;}
.block-img2 .content-img {width: 620px;height: 400px;transform: rotate(-37deg);transform-origin: 100% 0px;position: absolute;top: 0;right: 0;overflow: hidden;}
.block-img2 .content-img img {transform: rotate(37deg);transform-origin: 100% 0px;width: 400px;height: 500px;position: absolute;top: 0;right: 0;}

---

Các bạn có thể xem demo và code online tại đây:
https://codepen.io/trungnt256/pen/WWXKMx

Hoặc click vào link bên dưới để tải về máy.
https://uploadfiles.io/j5bpnl2q