Как бы вы создали диагональную композицию фотографий c панелей в CSS?

Question

Вот что я хочу сделать sh:

Вот что я сделал: https://codesandbox.io/s/elated-taussig-ll69v

Это виды работы, но вы можете видеть, что на краю изображения есть небольшое отставание относительно угла - как это выделено в двух розовых кругах моей фотографии. Вы можете видеть это особенно, когда вы перемещаете размер экрана.

Как я могу убедиться, что конечность монтажа остается постоянно, ответственно в углу ящика родителя?

Вот код:

import React, { Component } from "react";
import { render } from "react-dom";
import style from "./style.module.css";

export default class App extends Component {
  render() {
    return (
      <div className={style.component}>
        <div className={style.component}>
          <div className={style.top_page}>
            <div className={style.container}>
              <div className={`${style.photography} ${style.photography_1}`}>
                <img src="https://cdn.mindful.org/2016/02/Breathe2.jpg" />
              </div>
              <div
                className={`${style.diagonal_photography} ${
                  style.photography_2
                }`}
              >
                <img src="https://images.squarespace-cdn.com/content/54bf12d2e4b0f0d81bf74ee7/1516445040870-SEPFKA4WT8ESGYGQDOQK/file-20180118-158519-186b12q.jpg?content-type=image%2Fjpeg" />
              </div>
              <div className={`${style.photography} ${style.photography_3}`}>
                <img src="https://www.fao.org/fileadmin/templates/SOFO/2018-l/src/images/poster-forest.jpg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

.component {
  width: 100vw;
  min-height: 100vh;
  background: #010014;
  background: #1480db;
  background: #0eb0eb;
  background: #04d1de;
  background: #02d7eb;
  background: #02c2d4;
  background: #00c6da;
  background: #00cdd7;
  color: white;
  font-size: 5em;
  font-weight: bold;
}

.top_page {
  width: 100vw;
  height: 80vh;
  background: url(/static/top_page/top_page_image.png) top/contain no-repeat;
}

.container {
  width: auto;
  height: 40vh;
  overflow: hidden;
  position: relative;
  align-items: center;
  margin: auto;
  margin-top: 100px;
  background: yellow;
}

.photography img {
  position: absolute;
  width: 25vw;
  height: 40vh;
}

.diagonal_photography img {
  width: 80vw;
  height: 180vh;
  position: relative;
  bottom: 60vh;
  transform: rotate(20deg);
  left: 5vw;
}
.photography_1 img {
}

.photography_2 img {
  z-index: 100;
}

.photography_3 img {
  right: 0;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Вот идея с использованием clip-path:

.box {
  width:300px;
  height:300px;
  background:
    url(https://i.picsum.photos/id/25/400/800.jpg) left,
    url(https://i.picsum.photos/id/37/400/800.jpg) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  /* resize it, it's responsive*/
  resize:both;
  overflow:auto;
}
.box::before {
  content:"";
  display:block;
  height:100%;
  background:url(https://i.picsum.photos/id/104/800/800.jpg) center/cover;
  clip-path:polygon(40% 0,100% 0,60% 100%, 0 100%);
}

<div class="box"></div>