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:

* {
  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.

标签： css wordpress skew revolution-slider

1条回答

地球回转人心会变

2楼-- · 2019-06-24 12:33

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>

0人赞添加讨论(0) 举报

Slant/Skew only bottom of div

You can achieve this effect using pseudo elements and CSS triangles

The general principle of this technique is:

The following modifications are required:

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间