4

I have been trying to add a Skew/Slant to the bottom of a div. 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.

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.

What I am looking to achieve is for the top edge to be straight and the bottom edge to be skewed, for example:

Desired result

* {
  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 > *,
.stripe .custom-btn-color > * {
  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 > * {
  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 > ul,
.rev_slider_wrapper > ul,
.tp-revslider-mainul > li,
.rev_slider > ul > li,
.rev_slider > ul > li::before,
.tp-revslider-mainul > li::before,
.tp-simpleresponsive > ul,
.tp-simpleresponsive > ul > li,
.tp-simpleresponsive > ul > li::before,
.tp-revslider-mainul > li,
.tp-simpleresponsive > ul > 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 > li,
.rev_slider > ul > li,
.rev_slider > ul > li::before,
.tp-revslider-mainul > li::before,
.tp-simpleresponsive > ul > li,
.tp-simpleresponsive > ul > li::before,
.tp-revslider-mainul > li,
.tp-simpleresponsive > ul > 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);
}
<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">
  <div id="page">
    <div class="rv-slider" id="main-slideshow">
      <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;">
        <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;">
          <!-- START REVOLUTION SLIDER 5.2.6 fullwidth mode -->
          <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">
            <ul class="tp-revslider-mainul" style="width: 100%; height: 100%; overflow: hidden; display: block; visibility: visible; max-height: none;">
              <!-- SLIDE  -->
              <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">
                <!-- MAIN IMAGE -->
                <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);">
                  <!--Runtime Modification - Img tag is Still Available for SEO Goals in Source - <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">-->
                  <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"></div>
                </div>
                <!-- LAYERS -->
              </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="width: 0%; visibility: hidden !important;"></div>
            <div class="tp-loader spinner0" style="display: none;">
              <div class="dot1"></div>
              <div class="dot2"></div>
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
        </div>
        <div class="tp-fullwidth-forcer" style="width: 100%; height: 487px;"></div>
      </div>
      <!-- END REVOLUTION SLIDER -->
    </div>
  </div>
</body>

Thanks for any help in advance, if i can supply any more info please let me know.

Hidden Hobbes
  • 13,893
  • 3
  • 38
  • 64
Chris
  • 313
  • 1
  • 4
  • 21
  • You can probably achieve this with pseudo elements. Please can you include all the relevant code in the question itself to allow us to reproduce your issue. External links are not suitable as the may go dead or the problem get fixed making this question lose context. – Hidden Hobbes Aug 18 '16 at 14:07
  • Hello, i have included all my custom CSS. The other code is generated by wordpress and revolution slider. If if paste this in, is that going to work for you? – Chris Aug 18 '16 at 14:46
  • Hi @Chris, what we will need is a minimal example http://stackoverflow.com/help/mcve. In this case the HTML of the `div` with the ID `#main-slideshow` will probably be what we need and all the styles that effect it. – Hidden Hobbes Aug 18 '16 at 14:53
  • I hope what i've added is useful, a lot of the styling from rev slider seems to be in the HTML. – Chris Aug 18 '16 at 15:06
  • I believe it is not working due to the fact Revolution Slider is inserting the image through CSS, whereas this needs a actual image tag. – Chris Aug 18 '16 at 15:15
  • I've made some modifications to your question to embed the image and to provide a reproducible example. To do this you can use IE's inspector tools to copy a section of HTML and its CSS. See http://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-existing-sites/14664803#14664803 for more information. – Hidden Hobbes Aug 22 '16 at 08:24

1 Answers1

4

You can achieve this effect using pseudo elements and CSS triangles

Instead of using skew which is shifting the perspective of the entire box you can instead use a pseudo element to overlay a triangle over the top of the image to give the effect of a slanted box.

The general principle of this technique is:

  • Use the :after pseudo element to allow for content to be added to the page without needing extra markup
  • Use CSS triangles to make this pseudo element into a slanted triangle (the same colour as the page background) which spans the width of the box. This gives the impression that the box itself is slanted

The following modifications are required:

  • Remove the transform properties from #main-slideshow and .tp-bgimg
  • Add the rule .tp-bgimg:after to create the pseudo element. Add the following values to this rule:
    • border-color: transparent transparent #FFFFFF transparent;, border-style: solid;, border-width: 0 0 10vw 100vw;, height: 0; and width: 0; create the triangle. As the image spans the entire width of the page viewport units can be used to make the triangle responsive
    • bottom: 0;, position: absolute; and left: 0; position the triangle at the bottom of the container
    • content: ""; is required for the pseudo element to appear

* {
  padding: 0;
  margin: 0;
}
#main-slideshow {
  position: relative;
  z-index: 1;
  clear: both;
}
#main-slideshow {
  overflow: hidden;
}
#main-slideshow {
  overflow: hidden;
}
.custom-btn-color > *,
.stripe .custom-btn-color > * {
  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 > * {
  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 > ul,
.rev_slider_wrapper > ul,
.tp-revslider-mainul > li,
.rev_slider > ul > li,
.rev_slider > ul > li::before,
.tp-revslider-mainul > li::before,
.tp-simpleresponsive > ul,
.tp-simpleresponsive > ul > li,
.tp-simpleresponsive > ul > li::before,
.tp-revslider-mainul > li,
.tp-simpleresponsive > ul > 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 > li,
.rev_slider > ul > li,
.rev_slider > ul > li::before,
.tp-revslider-mainul > li::before,
.tp-simpleresponsive > ul > li,
.tp-simpleresponsive > ul > li::before,
.tp-revslider-mainul > li,
.tp-simpleresponsive > ul > 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:after {
  border-color: transparent transparent #FFFFFF transparent;
  border-style: solid;
  border-width: 0 0 10vw 100vw;
  bottom: 0;
  content: "";
  height: 0;
  position: absolute;
  left: 0;
  width: 0;
}
<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">
  <div id="page">
    <div class="rv-slider" id="main-slideshow">
      <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;">
        <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;">
          <!-- START REVOLUTION SLIDER 5.2.6 fullwidth mode -->
          <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">
            <ul class="tp-revslider-mainul" style="width: 100%; height: 100%; overflow: hidden; display: block; visibility: visible; max-height: none;">
              <!-- SLIDE  -->
              <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">
                <!-- MAIN IMAGE -->
                <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);">
                  <!--Runtime Modification - Img tag is Still Available for SEO Goals in Source - <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">-->
                  <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"></div>
                </div>
                <!-- LAYERS -->
              </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="width: 0%; visibility: hidden !important;"></div>
            <div class="tp-loader spinner0" style="display: none;">
              <div class="dot1"></div>
              <div class="dot2"></div>
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
        </div>
        <div class="tp-fullwidth-forcer" style="width: 100%; height: 487px;"></div>
      </div>
      <!-- END REVOLUTION SLIDER -->
    </div>
  </div>
</body>
Hidden Hobbes
  • 13,893
  • 3
  • 38
  • 64
  • Hey @Hidden-Hobbes is it possible to run the slant in the same way but at the top of the div instead of the bottom? Still going right to left. I have tried playing with your css and managed to change certain things but couldn't quite get what i wanted. Thanks – Chris Sep 01 '16 at 13:52
  • @Chris. Yep, change the borders to modify the direction of the triangle and position it from the `top` instead of the `bottom`. https://jsfiddle.net/yc9n0jpm/ – Hidden Hobbes Sep 01 '16 at 14:04
  • Thanks a lot. I had reversed the borders but hadn't changed from bottom to top. – Chris Sep 01 '16 at 14:14
  • No problem @Chris. – Hidden Hobbes Sep 01 '16 at 14:49