title: Slant/Skew only bottom of div
body: <p>I have been trying to add a Skew/Slant to the bottom of a <code>div</code>. I have had some success, as you can see on the example below, I have managed to apply the skew to a couple of the elements on the page.</p>
  
  <p>Currently the Skew is applied to both the top and bottom of the containers and it seems to stop half way through the bottom and top then go back to straight edge.</p>
  
  <p>What I am looking to achieve is for the top edge to be straight and the bottom edge to be skewed, for example:</p>
  
  <p><a href="https://i.stack.imgur.com/kJTbN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kJTbN.jpg" alt="Desired result"></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-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  #main-slideshow {
    position: relative;
    z-index: 1;
    clear: both;
  }
  #main-slideshow {
    overflow: hidden;
  }
  #main-slideshow {
    -webkit-transform: skewY(-2deg);
    -moz-transform: skewY(-2deg);
    -ms-transform: skewY(-2deg);
    -o-transform: skewY(-2deg);
    transform: skewY(-2deg);
    overflow: hidden;
  }
  .custom-btn-color &gt; *,
  .stripe .custom-btn-color &gt; * {
    color: inherit !important;
  }
  #page {
    position: relative;
    overflow: hidden;
  }
  #page {
    background: #ffffff none repeat center top;
    background-size: auto;
    background-attachment: ;
  }
  body {
    background: #ffffff none no-repeat fixed center center;
    background-size: cover;
  }
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  html,
  body,
  body.page,
  .wf-container &gt; * {
    font: normal 300 18px /24px"Lato", Helvetica, Arial, Verdana, sans-serif;
    word-spacing: normal;
    color: #676b6d;
  }
  .rev_slider_wrapper {
    position: relative;
    z-index: 0;
  }
  .rev_slider_wrapper {
    width: 100%;
  }
  .fullwidthbanner-container {
    position: relative;
    padding: 0;
    overflow: hidden;
  }
  .rev_slider_wrapper {
    z-index: 1;
  }
  .rev_slider {
    position: relative;
    overflow: visible;
  }
  .fullwidthbanner-container .fullwidthabanner {
    width: 100%;
    position: relative;
  }
  dd,
  dl,
  menu,
  ol,
  ul {
    list-style: none;
    list-style-image: none;
  }
  .tp-revslider-slidesli,
  .tp-revslider-mainul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .rev_slider &gt; ul,
  .rev_slider_wrapper &gt; ul,
  .tp-revslider-mainul &gt; li,
  .rev_slider &gt; ul &gt; li,
  .rev_slider &gt; ul &gt; li::before,
  .tp-revslider-mainul &gt; li::before,
  .tp-simpleresponsive &gt; ul,
  .tp-simpleresponsive &gt; ul &gt; li,
  .tp-simpleresponsive &gt; ul &gt; li::before,
  .tp-revslider-mainul &gt; li,
  .tp-simpleresponsive &gt; ul &gt; li {
    list-style: none !important;
    position: absolute;
    margin: 0px !important;
    padding: 0px !important;
    overflow-x: visible;
    overflow-y: visible;
    list-style-type: none !important;
    background-image: none;
    background-position: 0px 0px;
    text-indent: 0em;
    top: 0px;
    left: 0px;
  }
  .tp-revslider-mainul &gt; li,
  .rev_slider &gt; ul &gt; li,
  .rev_slider &gt; ul &gt; li::before,
  .tp-revslider-mainul &gt; li::before,
  .tp-simpleresponsive &gt; ul &gt; li,
  .tp-simpleresponsive &gt; ul &gt; li::before,
  .tp-revslider-mainul &gt; li,
  .tp-simpleresponsive &gt; ul &gt; li {
    visibility: hidden;
  }
  .tp-bannertimer {
    visibility: hidden;
    width: 100%;
    height: 5px;
    background: #fff;
    background: rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 200;
    top: 0px;
  }
  .tp-bannertimer {
    background: #000;
    background: rgba(0, 0, 0, 0.15);
    height: 5px;
  }
  .tp-bottom.tp-bannertimer {
    top: auto;
    bottom: 0px !important;
    height: 5px;
  }
  .tp-loader {
    top: 50%;
    left: 50%;
    z-index: 10000;
    position: absolute;
  }
  .spinner0.tp-loader {
    width: 40px;
    height: 40px;
    background-color: #fff;
    background: url(../assets/loader.gif) no-repeat center center;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    margin-top: -20px;
    margin-left: -20px;
    -webkit-animation: tp-rotateplane 1.2s infinite ease-in-out;
    animation: tp-rotateplane 1.2s infinite ease-in-out;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  .rev_slider li.tp-revslider-slidesli {
    position: absolute !important;
  }
  .tp-bgimg {
    -webkit-transform: skewY(2deg);
    -moz-transform: skewY(2deg);
    -ms-transform: skewY(2deg);
    -o-transform: skewY(2deg);
    transform: skewY(2deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="home page page-id-8 page-template-default slideshow-on disabled-hover-icons click-effect-on-img overlay-cursor-on srcset-enabled btn-material custom-btn-color custom-btn-hover-color filter-style-minimal contact-form-material small-fancy-datas outlines-bullets bold-icons phantom-fade phantom-disable-decoration phantom-custom-logo-on floating-mobile-menu-icon top-header first-switch-logo-left first-switch-menu-right second-switch-logo-left second-switch-menu-right right-mobile-menu layzr-loading-on wpb-js-composer js-comp-ver-4.12 vc_responsive semitransparent-portfolio-icons album-minuatures-style-2 not-webkit no-mobile phantom-off"&gt;
    &lt;div id="page"&gt;
      &lt;div class="rv-slider" id="main-slideshow"&gt;
        &lt;div class="forcefullwidth_wrapper_tp_banner" id="rev_slider_1_1_forcefullwidth" style="width: 100%; height: auto; margin-top: 0px; margin-bottom: 0px; position: relative;"&gt;
          &lt;div class="rev_slider_wrapper fullwidthbanner-container" id="rev_slider_1_1_wrapper" style="margin: 0px auto; padding: 0px; left: 0px; width: 1007px; height: 487px; overflow: visible; position: absolute; background-color: transparent;"&gt;
            &lt;!-- START REVOLUTION SLIDER 5.2.6 fullwidth mode --&gt;
            &lt;div class="rev_slider fullwidthabanner revslider-initialised tp-simpleresponsive" id="rev_slider_1_1" style="height: 487px; margin-top: 0px; margin-bottom: 0px; max-height: 600px;" data-version="5.2.6" data-slideactive="rs-1"&gt;
              &lt;ul class="tp-revslider-mainul" style="width: 100%; height: 100%; overflow: hidden; display: block; visibility: visible; max-height: none;"&gt;
                &lt;!-- SLIDE  --&gt;
                &lt;li class="greyvan-slide-one tp-revslider-slidesli active-revslide" style="width: 100%; height: 100%; overflow: hidden; visibility: inherit; z-index: 20; opacity: 1; background-color: rgba(255, 255, 255, 0);" data-description="" data-param10="" data-param9=""
                data-param8="" data-param7="" data-param6="" data-param5="" data-param4="" data-param3="" data-param2="" data-param1="" data-title="Slide" data-saveperformance="off" data-rotate="0" data-masterspeed="300" data-easeout="default" data-easein="default"
                data-hideslideonmobile="off" data-hideafterloop="0" data-slotamount="default" data-transition="fade" data-index="rs-1"&gt;
                  &lt;!-- MAIN IMAGE --&gt;
                  &lt;div class="slotholder" style="left: 0px; top: 0px; width: 100%; height: 100%; visibility: inherit; position: absolute; z-index: 0; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"&gt;
                    &lt;!--Runtime Modification - Img tag is Still Available for SEO Goals in Source - &lt;img width="1920" height="1080" title="visiontech-hero-test" class="rev-slidebg defaultimg" alt="" src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg" data-no-retina="" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="center center"&gt;--&gt;
                    &lt;div class="tp-bgimg defaultimg" style='background-position: center; width: 100%; height: 100%; visibility: inherit; z-index: 20; opacity: 1; background-image: url("https://via.placeholder.com/1200x1200"); background-repeat: no-repeat; background-size: cover; background-color: transparent;'
                    src="https://via.placeholder.com/1200x1200"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- LAYERS --&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="tp-bannertimer tp-bottom" style="width: 0%; visibility: hidden !important;"&gt;&lt;/div&gt;
              &lt;div class="tp-loader spinner0" style="display: none;"&gt;
                &lt;div class="dot1"&gt;&lt;/div&gt;
                &lt;div class="dot2"&gt;&lt;/div&gt;
                &lt;div class="bounce1"&gt;&lt;/div&gt;
                &lt;div class="bounce2"&gt;&lt;/div&gt;
                &lt;div class="bounce3"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tp-fullwidth-forcer" style="width: 100%; height: 487px;"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END REVOLUTION SLIDER --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any help in advance, if i can supply any more info please let me know.</p>