Присоединение диагональных divs с flex

Question

У меня есть 2 divs. Правый div - это изображение, вырезанное по диагонали. Левые divs должны иметь некоторый текст внутри. Я хочу, чтобы это было в полной мере реагировать следующим образом:

Проблема возникает при изменении размера окна, он рушится, как на картинке:

.

Также есть текст в левом div, который необходимо отобразить, но с flex это, похоже, не работает, поэтому я отключил его. Пожалуйста, предоставьте решение для этого. Вот мой CSS и HTML:

#diagonal { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
#diagonal #ct-about-col-left { 
 
    width: 60%; 
 
    border-right: 190px solid transparent; 
 
    border-bottom: 500px solid grey; 
 
    z-index: 2; 
 
} 
 
#diagonal span { 
 
    display: none; 
 
} 
 
#ct-about-col-right { 
 
    height: 500px; 
 
    width: 50%; 
 
    border: 2px solid; 
 
    background-image: url(images/content/about/right-col-image.jpg); 
 
    z-index: 0; 
 
    margin-left: -12%; 
 
    margin-right: 0; 
 
} 
 
}

<div id="diagonal"> 
 
    <div id="ct-about-col-left"> 
 
    <span>We are the best</span> 
 
    <span>text1 text1 text1</span> 
 
    <span>Text2 text2 text2 text2</span> 
 
    <div> 
 
     <span>Read more</span> 
 
    </div> 
 
    </div> 
 
    <div id="ct-about-col-right"></div> 
 
</div>

Answer 1

Могу ли я предложить другой подход, который позволит вам сэкономить некоторое пространство разметки и правила CSS, а также.

Просто создайте полную ширину DIV с идентификатором позволяет говорить ct-about, придать ему цвет фона grey, а затем просто цепь Фоновое изображение сверху цвета, как так:

background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey; 

Это просто говорит браузер, сделайте мою коробку серой и поместите это изображение поверх серого цвета. Свойства no-repeat right top не позволяют браузеру повторять изображение, поэтому вы не получаете плитку, скажите ti, чтобы поместить изображение в крайнее правое и верхнее положение.

Таким образом, все будет реагировать также.

Вот Fiddle для Вас, чтобы лучше понять.

Вы можете найти более подробную информацию о нескольких фонов CSS в Mozilla Developer Network

Answer 2

Может быть, рассмотреть несколько иной наценку и способ добавления изображения (в качестве фонового изображения) и сделать угол (с преобразованием: перекос).

Демо: http://codepen.io/anon/pen/rjyKRo

<div class="container"> 
    <div class="caption"> 
    <p>CONTENT</p> 
    </div> 
</div> 


* { box-sizing: border-box; } 

.container { 
    width: 100%; 
    height: 50vh; 

    overflow: hidden; 

    background-image: url("http://unsplash.it/600"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 100% 50%; 
} 

.caption { 
    height: 100%; 
    width: 50%; 
    min-width: 500px; 
    padding-top: 20%; 
    padding-left: 130px; 
    background-color: #ddd; 

    transform: skew(10deg, 0deg); 
    transform-origin: 100% 100%; 
} 

.caption p { 

    transform: skew(-10deg, 0deg); 
}