在内联行中倾斜图像 column/div

Question

有一些关于如何倾斜 div 的单面的答案，既有空的也有图像的：

CSS3 Transform Skew One Side

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

我使用 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

你可以利用伪元素使外观偏向一侧

CSS(SCSS)

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;
    position: relative;
    overflow:visible;
    &::after{
      content:"";
      position: absolute;
      z-index:1;
      top:0;
      bottom:0;
      height:100%;
      width:20%;
      background-color: cyan;
      right:-40px;
      transform:skew(-20deg);
    }
    }
    &--img {
        background-color: blue;
        transform-origin: top left;
        //margin-left: 80px;
    }
}

link for reference

希望这对您有所帮助

Answer 2

使用 三角形边框 伪装技巧。使用视口单位，它将随高度缩放

为了使倾斜居中，我将 right 的尺寸调整为 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>

在内联行中倾斜图像 column/div

Skew an image column/div in an inline row

html

css

flexbox

zurb-foundation