Ausrichten zwei diagonal Bilder

Question

Also habe ich das folgende Design für ein Helden-Layout, das ich arbeite:

Ich habe so weit wie macht die beiden Bilder wie auf dem Bild mit der Beschreibung gezeigt neben dem Bild und Ausrichten der Bilder. Ich habe auch in Clip-Pfad geschaut, aber leider IE nicht unterstützt. Also habe ich die transform rotieren-Option verwendet, um die Divs mit -15 Grad zu drehen und die Bilder innerhalb des Divs um 15 Grad zu drehen. Das Problem, das ich habe, ist jedoch, dass beim Skalieren mit dem Browser eine Lücke zwischen den zwei Bildern auftaucht, die ausgerichtet bleiben müssen. (Tablet und Handy hat einen anderen Zustand, aber das ist eine andere Geschichte).

Ich habe einen Codepen erstellt: , die das Layout einschließlich der CSS hat. Wie halte ich die beiden Bilder ausgerichtet, wenn der Browser skaliert? Was habe ich nicht berücksichtigt?

HTML:

<nav> Test Nav </nav> 
<div class="container"> 
    <div class="hero-container-top"> 
    <div class="hero-img-box-container"> 
    <div class="hero-img-box-left"> 
     <div class="hero-img-box"> 
     <img class="hero-img" src="http://gyproc.dev/themes/custom/drywall/images/hero_img1.jpeg"> 
     </div> 
    </div> 
    </div> 
    <div class="hero-text-box"> 
     <div class="hero-text-box-cta"> 
     <h1>Hello World</h1> 
     <h3>Phasellus tempus. Quisque ut nisi. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mollis tellus ac sapien.</h3> 
     </div> 
    </div> 
    </div> 
    <div class="hero-container-bottom"> 
    <div class="hero-text-box"> 
     <div class="hero-text-box-cta"> 
     <h2> Hello world</h2> 
     <h3>Phasellus tempus. Quisque ut nisi. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mollis tellus ac sapien.</h3> 
     </div> 
    </div> 
    <div class="hero-img-box-container"> 
    <div class="hero-img-box-right"> 
     <div class="hero-img-box"> 
     <img class="hero-img" src="http://gyproc.dev/themes/custom/drywall/images/hero_img2.jpeg"> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 

CSS:

body { 
    background: white; 
    font-family: 'Helvetica', sans-serif; 
    display: flex; 
    flex-direction: row; 
} 

h1 { 
    font-size: 36px; 
    line-height: 46px; 
    font-weight: 100; 
} 

h2 { 
    font-size: 24px; 
    font-weight: 100; 
} 

h3 { 
    font-size: 16px; 
    line-height: 30px; 
    font-weight: 100; 
} 

nav { 
    flex: 0 0 235px; 
    background: #0569C8; 
    display: inline-block; 
} 

.container { 
    flex: 1 0 auto; 
    margin: 36px; 
    overflow: hidden; 
    background: white; 
} 

.hero-img-box-container { 
    width: 60%; 
} 

.hero-container-top { 
    display: flex; 
    flex-direction: row; 
    height: 767px; 
    background: white; 

    .hero-text-box { 
    width: 40%; 
    position: relative; 
    } 

    .hero-text-box-cta { 
    position: absolute; 
    top: 40%; 
    left: 40%; 
    transform: translateX(-50%) translateY(-50%); 
    } 
} 

.hero-container-bottom { 
    display: flex; 
    flex-direction: row; 
    position: relative; 
    top: -256px; 
    height: 751px; 

    .hero-text-box { 
    width: 40%; 
    position: relative; 
    } 

    .hero-text-box-cta { 
    position: absolute; 
    top: 60%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    } 
} 

.hero-img-box-left { 
    background: lightgrey; 
    display: inline-block; 
    height: 1023px; 
    width: 100%; 
    transform: rotate(15deg); 
    transform-origin: top; 
    position: relative; 
    top: -165px; 
    overflow: hidden; 

    .hero-img-box { 
    transform: rotate(-15deg); 
    display: inline-block; 
    } 

    .hero-img { 
    height: 765px; 
    width: auto; 
    position: relative; 
    top: 140px; 
    left: 10px; 
    } 
} 

.hero-img-box-right { 
    background: lightgrey; 
    display: inline-block; 
    height: 1000px; 
    width: 100%; 
    transform: rotate(15deg); 
    transform-origin: top; 
    position: relative; 
    overflow: hidden; 
    right: -21.8%; 
    top: 0; 

    .hero-img-box { 
    transform: rotate(-15deg); 
    display: inline-block; 
    } 

    .hero-img { 
    height: 628px; 
    width: auto; 
    position: relative; 
    top: 80px; 
    left: -130px; 
    } 
} 

Answer 1

ich eine praktikable Lösung zur Verfügung gestellt haben: http://codepen.io/adamk22/pen/dXqGbo/

CSS:

body { 
    background: white; 
    font-family: 'Helvetica', sans-serif; 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
} 

h1 { 
    font-size: 36px; 
    line-height: 46px; 
    font-weight: 100; 
} 

h2 { 
    font-size: 24px; 
    font-weight: 100; 
} 

h3 { 
    font-size: 16px; 
    line-height: 30px; 
    font-weight: 100; 
} 

nav { 
    flex: 0 0 235px; 
    background: #0569C8; 
    display: inline-block; 
} 

.container { 
    flex: 1 0 auto; 
    margin: 36px; 
    overflow: hidden; 
    background: white; 
} 
.hero-container { 
    background: white; 
} 

.hero-container__top { 
    position: relative; 
    height: auto; 

    .hero-img { 
    width: 100%; 
    } 

    .hero-text-box { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    } 

    .hero-text-box-cta { 
    padding: 50px; 
    } 
} 

.hero-container__bottom { 
    position: relative; 
    height: auto; 

    .hero-img { 
    width: 100%; 
    } 

    .hero-text-box { 
    width: 100%; 
    } 

    .hero-text-box-cta { 
    padding: 0 50px; 
    } 

    .hero-img-box-container { 
    } 
} 

.hero-img { 
    height: auto; 
    position: relative; 
} 

.hero-img-box-container { 
    width: 100%; 
    position: relative; 
    height: auto; 
} 

.hero-img-box { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

.hero-img-box__left { 
    background: white; 
    z-index: 10; 
} 

.hero-img-box__right { 
    background: white; 
} 

@media screen and (min-width: 1230px) { 

    .hero-container { 
    flex: 1 0 auto; 
    overflow: hidden; 
    background: white; 
    } 

    .hero-container__top { 
    overflow: hidden; 
    position: relative; 
    height: 0; 
    padding-bottom: 120%; 
    margin-top: -85px; 

    .hero-img { 
     width: 175%; 
    } 

    .hero-text-box { 
     width: 40%; 
     height: 100%; 
     position: relative; 
     margin-left: 60%; 
    } 

    .hero-text-box-cta { 
     margin-top: 90%; 
     transform: translateY(-50%); 
     padding: 50px; 
    } 
    } 

    .hero-container__bottom { 
    position: relative; 
    overflow: hidden; 
    height: 0; 
    padding-bottom: 50%; 
    margin-top: -60%; 

    .hero-img { 
     width: 120%; 
    } 

    .hero-text-box { 
     width: 40%; 
     height: 100%; 
    } 

    .hero-text-box-cta { 
     position: absolute; 
     z-index: 20; 
     top: 40%; 
     width: 45%; 
     padding: 0 50px; 
    } 

    .hero-img-box-container { 
     left: 50%; 
    } 
    } 

    .hero-img { 
    left: 50%; 
    height: auto; 
    position: absolute; 
    transform: rotate(-6deg) translateX(-50%); 
    } 

    .hero-img-box-container { 
    width: 60%; 
    position: absolute; 
    top: 0; 
    height: 100%; 
    } 

    .hero-img-box { 
    position: absolute; 
    display: inline-block; 
    height: 2000px; 
    width: 100%; 
    overflow: hidden; 
    top: 0; 
    transform: rotate(6deg); 
    } 

    .hero-img-box__left { 
    background: white; 
    transform-origin: top; 
    z-index: 10; 
    } 

    .hero-img-box__right { 
    background: white; 
    transform-origin: top; 
    } 

} 

@media screen and (min-width: 1400px) { 

    .hero-container__bottom { 
    .hero-text-box-cta { 
     top: 50%; 
    } 
    } 

}