title: How to fix content with div skew?
body: <p>I am currently transforming a <code>&lt;div&gt;</code> element using the <code>skewX(-18deg)</code> value, the problem is when I insert text into it I cannot prevent it from overflowing.</p>
  
  <p>The element inside the skewed container is transformed back to normal using <code>skewX(18deg)</code>.</p>
  
  <p>The final result should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LJeNw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LJeNw.png" alt=""></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var curPage = 1;
    var numOfPages = $(".skw-page").length;
    var animTime = 1000;
    var scrolling = false;
    var pgPrefix = ".skw-page-";
  
    function pagination() {
      scrolling = true;
  
      $(pgPrefix + curPage).removeClass("inactive").addClass("active");
      $(pgPrefix + (curPage - 1)).addClass("inactive");
      $(pgPrefix + (curPage + 1)).removeClass("active");
  
      setTimeout(function() {
        scrolling = false;
      }, animTime);
    };
  
    function navigateUp() {
      if (curPage === 1) return;
      curPage--;
      pagination();
    };
  
    function navigateDown() {
      if (curPage === numOfPages) return;
      curPage++;
      pagination();
    };
  
    $(document).on("mousewheel DOMMouseScroll", function(e) {
      if (scrolling) return;
      if (e.originalEvent.wheelDelta &gt; 0 || e.originalEvent.detail &lt; 0) {
        navigateUp();
      } else {
        navigateDown();
      }
    });
  
    $(document).on("keydown", function(e) {
      if (scrolling) return;
      if (e.which === 38) {
        navigateUp();
      } else if (e.which === 40) {
        navigateDown();
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *:before,
  *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    background: #15181A;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
  }
  .skw-pages {
    overflow: hidden;
    position: relative;
    height: 100vh;
  }
  .skw-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .skw-page__half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100vh;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
  }
  .skw-page__half--left {
    left: 0;
    -webkit-transform: translate3d(-32.4vh, 100%, 0);
    transform: translate3d(-32.4vh, 100%, 0);
  }
  .skw-page__half--right {
    left: 50%;
    -webkit-transform: translate3d(32.4vh, -100%, 0);
    transform: translate3d(32.4vh, -100%, 0);
  }
  .skw-page__half--30 {
    width: 30%;
  }
  .skw-page__half--70 {
    width: 70%;
  }
  .skw-page.active .skw-page__half {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .skw-page__skewed {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 140%;
    height: 100%;
    -webkit-transform: skewX(-18deg);
    transform: skewX(-18deg);
    background: #000;
  }
  .skw-page__half--left .skw-page__skewed {
    left: -20%;
  }
  .skw-page__half--right .skw-page__skewed {
    right: -20%;
  }
  .skw-page__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 30%;
    color: #fff;
    -webkit-transform: skewX(18deg);
    transform: skewX(18deg);
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s, -webkit-transform 1s;
    background-size: cover;
  }
  .skw-page__half--left .skw-page__content {
    padding-left: 3%;
    padding-right: 2%;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }
  .skw-page__half--right .skw-page__content {
    padding-left: 30%;
    padding-right: 30%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  .skw-page.inactive .skw-page__content {
    opacity: 0.5;
    -webkit-transform: skewX(18deg) scale(0.95);
    transform: skewX(18deg) scale(0.95);
  }
  .skw-page__heading {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 25px;
  }
  .skw-page__description {
    font-size: 14px;
  }
  .skw-page__link {
    color: #FFA0A0;
  }
  .skw-page-1 .skw-page__half--left .skw-page__content {
    background: #292929;
  }
  .skw-page-1 .skw-page__half--right .skw-page__content {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg");
  }
  .skw-page-2 .skw-page__half--left .skw-page__content {
    background: #292929;
  }
  .skw-page-2 .skw-page__half--right .skw-page__content {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");
  }
  .skw-page-3 .skw-page__half--left .skw-page__content {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg");
  }
  .skw-page-3 .skw-page__half--right .skw-page__content {
    background: #292929;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="skw-pages"&gt;
  
    &lt;div class="skw-page skw-page-1 active"&gt;
      &lt;div class="skw-page__half skw-page__half--left skw-page__half--30"&gt;
        &lt;div class="skw-page__skewed"&gt;
          &lt;div class="skw-page__content"&gt;
            &lt;h2 class="skw-page__heading"&gt;Page 1&lt;/h2&gt;
            &lt;p class="skw-page__description"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus harum qui, placeat fugit delectus maxime voluptatibus perspiciatis, quia sit itaque! Ut eum dicta quam minus earum beatae at iure perspiciatis. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Ex, ut. Fugit minima consequatur voluptatem commodi culpa, adipisci laborum qui vitae. Voluptas voluptates nihil ratione eaque labore perspiciatis, animi placeat eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing
              elit. Quibusdam libero, cupiditate asperiores tempora quos porro inventore? Praesentium aperiam deleniti nam a aliquid sequi ea perspiciatis error recusandae enim, dolorem quae.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="skw-page__half skw-page__half--right skw-page__half--70"&gt;
        &lt;div class="skw-page__skewed"&gt;
          &lt;div class="skw-page__content"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="skw-page skw-page-2"&gt;
      &lt;div class="skw-page__half skw-page__half--left skw-page__half--30"&gt;
        &lt;div class="skw-page__skewed"&gt;
          &lt;div class="skw-page__content"&gt;
            &lt;h2 class="skw-page__heading"&gt;Page 2&lt;/h2&gt;
            &lt;p class="skw-page__description"&gt;Ok, ok, just one more scroll!&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="skw-page__half skw-page__half--right skw-page__half--70"&gt;
        &lt;div class="skw-page__skewed"&gt;
          &lt;div class="skw-page__content"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="skw-page skw-page-3"&gt;
      &lt;div class="skw-page__half skw-page__half--left skw-page__half--30"&gt;
        &lt;div class="skw-page__skewed"&gt;
          &lt;div class="skw-page__content"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="skw-page__half skw-page__half--right skw-page__half--70"&gt;
        &lt;div class="skw-page__skewed"&gt;
          &lt;div class="skw-page__content"&gt;
            &lt;h2 class="skw-page__heading"&gt;Epic finale&lt;/h2&gt;
            &lt;p class="skw-page__description"&gt;
              Feel free to check
              &lt;a class="skw-page__link" href="http://codepen.io/suez/pens/public/" target="_blank"&gt;my other pens&lt;/a&gt; and follow me on
              &lt;a class="skw-page__link" href="https://twitter.com/NikolayTalanov" target="_blank"&gt;Twitter&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here my pen:</p>
  
  See the Pen <a href="http://codepen.io/r0ysy0301/pen/pNjGrB/" rel="noreferrer">New version - Scroll one page</a> by Văn Lộc (<a href="http://codepen.io/r0ysy0301" rel="noreferrer">@r0ysy0301</a>) on <a href="http://codepen.io" rel="noreferrer">CodePen</a>.</p>