Выравнивание две диагональные изображения

Question

Таким образом я получил следующий дизайн макета героя, что я работаю:

Я дошел до создания двух изображений, как показано на изображении с описанием рядом с изображением и выравниванием изображений. Я также рассмотрел клип-путь, но, к сожалению, он не поддерживает IE. Поэтому я использовал опцию поворота поворота, чтобы повернуть divs с -15 градусов и повернуть изображения внутри div назад с 15 градусами. Однако проблема заключается в том, что при масштабировании с помощью браузера между двумя изображениями, которые должны оставаться выровненными, возникает разрыв. (Таблетка и мобильное устройство имеют другое состояние, но это еще одна история).

Я создал код: http://codepen.io/adamk22/pen/zBLBAL который имеет макет, включая css. Как сохранить два изображения в соответствии с масштабом браузера? Что я не принял во внимание?

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

Я предоставил работоспособное решение: 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%; 
    } 
    } 

}