创建有角度的 CSS3 分隔线 - 100% / 自动高度

Question

我检查了这两个帖子：Adjacent divs with angled borders? [duplicate] 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>

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>

创建有角度的 CSS3 分隔线 - 100% / 自动高度

Creating an angled CSS3 divider - 100% / Auto height

css

svg

angle

css-transforms