Skew an image column/div in an inline row

Question

There are a few answers out there about how to skew the single side of a div both empty and with images:

But using these answers, I cannot figure out the rest of my issue. I am attempting to create a 2 column row with an image background for the second column and a skewed or angled left side. The problem I have is filling the space with the containers after they have been skewed.

I am using Foundation 6 as the primary framework behind my site. I have attached an image of how it should look completed

The closest I have got so far is this:

I have posted the code I have so far below. 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;
    }
}

UPDATE - from first answer Adding a pseudo element to solve causes problems with variable heights. If I were to set 100vh, it would give a different result to if I were to set height: 700x;. See image below:

score 1 · Answer 1 · answered Jun 26 '17 at 09:37

You can Make use of the pseudo elements to make the look skewed one side

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

hope this helps

The problem I have found from this solution is that it doesn't really account for height. If I wanted to go 100vh in the row, it would cause some issues. I have updated my answer to show you what I mean — Luke, Jun 26 '17 at 10:11

Asons · Accepted Answer · 2017-06-26T10:43:34.077

Use the triangle border trick with a pseudo. With viewport units it will scale with the height

To make the skew centered, I sized the right 25px (half of the skewed area) wider than the left.

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>

Skew an image column/div in an inline row

2 Answers2