html - 在内联行中倾斜图像列/div

Question

关于如何倾斜空的和带有图像的 div 的单边有一些答案:

CSS3 Transform Skew One Side

Skew one side only of an element

但是使用这些答案，我无法弄清楚我的问题的其余部分。我正在尝试创建一个 2 列的行，第二列的图像背景和左侧倾斜或成 Angular 。我遇到的问题是在容器倾斜后用容器填充空间。

我使用 Foundation 6 作为我网站背后的主要框架。我附上了它应该如何完成的图片

到目前为止我得到的最接近的是:

我已经在下面发布了我目前拥有的代码。 Codepen

HTML:

<section class="lan_primary">
  <div class="container-full">
    <div class="row wide">
      <div class="columns small-12 medium-6 lan_primary--select">
        CONTENT LEFT
      </div>
      <div class="columns small-12 medium-6 lan_primary--img">
        CONTENT
      </div>
    </div>
  </div>
</section>

CSS:

div {
  border: 1px red solid;
}

.lan_primary {
    width: 100%;
    height: 80vh;
    margin-top: 10vh;
    overflow: hidden;
    .row {
        flex-flow: row !important;
        overflow: hidden;
    }

    &--select,
    &--img {
        padding: 100px 0;
        overflow: hidden;
        position: relative;
    }
    &--select {
        background-color: aqua;
    }
    &--img {
        background-color: blue;
        transform-origin: top left;
        transform: skew(-20deg);
        //margin-left: 80px;
    }
}

更新 - 来自第一个答案添加一个伪元素来解决导致高度可变的问题。如果我要设置 100vh，它会给出不同的结果，如果我要设置 height: 700x;。见下图:

Answer 1

使用伪装的三 Angular 形边框技巧。使用视口(viewport)单位，它将随高度缩放

为了使倾斜居中，我将右边的大小调整为25px(倾斜的一半 区域)比左边宽。

html, body {
  margin: 0;
}

.wrapper {
  display: flex;
}
.left, .right {
  height: 100vh;
}

.left {
  flex-basis: calc(50% - 25px);
  position: relative;
  background: lightgray;
  display: flex;
  align-items: center;
}
.left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  height: 0;
  width: 0;
  border-top: 100vh solid lightgray;
  border-right: 50px solid transparent;
}

.right {
  flex-basis: calc(50% + 25px);
  background: url(http://lorempixel.com/500/500/people/10/) left center no-repeat;
  background-size: cover;
}

<div class="wrapper">
  <div class="left"> 
    <h1>Some text</h1>
  </div>
  <div class="right"></div>
</div>