Создание углового разделителя CSS3 - 100%/Авто высота

Question

Я проверил эти два сообщения: Adjacent divs with angled borders? [duplicate] и Shape with a slanted side (responsive), но эти решения не настроены на 100% высоту контейнера, и мне это нужно. Я не могу найти решение, соответствующее моему сценарию.

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

Вот код, я использую с jSFiddle: https://jsfiddle.net/qzma0r6k/1/

CSS

section { 
    position: relative; 
    color: #fff; 
} 
.diagonal:before { 
    position: absolute; 
    content:''; 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    top: 0; 
    right:0; 
    height:100%; 
    z-index: 0; 
    width: 50%; 
    background:pink; 
} 

HTML

<section class="c-1"> 
    <div class="c-2 diagonal"> 
    <h1>Work with us</h1> 
    <p>Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere.</p> 
    </div> 
    <div class="bg-image"></div> 
</section> 

Answer 1

Что-то вроде этого?

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.c-1 { 
 
    background: #333; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.c-2 { 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
    color: #fff; 
 
    padding: 50px; 
 
} 
 

 
.bg-image { 
 
    position: absolute; 
 
    width: 50%; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    padding: 0; 
 
    background-image: url(http://placehold.it/350x150); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    z-index: 0; 
 
} 
 

 
section { 
 
    position: relative; 
 
    color: #fff; 
 
} 
 

 
.diagonal { 
 
    position: relative; 
 
    z-index:1; 
 
} 
 

 
.diagonal:after { 
 
    right: 0; 
 
    left: 100px; 
 
    position: absolute; 
 
    -webkit-transform: skewX(-15deg) rotate(180deg); 
 
    -ms-transform: skewX(-15deg) rotate(180deg); 
 
    transform: skewX(-15deg) rotate(180deg); 
 
    content: ""; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #333; 
 
    z-index:-1; 
 
}

<section class="c-1"> 
 
    <div class="c-2 diagonal"> 
 
    <h1> 
 
    Work with us 
 
    </h1> 
 
    <p> 
 
     Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere. A cubilia varius dapibus non 
 
     scelerisque aliquam imperdiet nec montes suspendisse orci potenti dignissim vestibulum venenatis sociosqu ullamcorper vestibulum scelerisque magna sem ultricies convallis cras. Ante sed elit tristique interdum hendrerit nascetur a cras suspendisse 
 
     mi fermentum vestibulum auctor a taciti euismod ac non adipiscing a. Maecenas parturient a dui sodales vestibulum nisl nisi consequat cum lacus lobortis senectus metus at adipiscing cursus parturient a. 
 
    </p> 
 
    </div> 
 
    <div class="bg-image"></div> 
 
</section>