我检查了这两个帖子：相邻的 div 带有倾斜的边框？ [复制] and 具有斜边的形状（响应式）但发布的这些解决方案不会调整为容器的 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>
像这样的东西吗？
* {
-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>