倾斜/倾斜仅div的底部 [英] Slant/Skew only bottom of div

查看：111 发布时间：2020/7/6 0:30:32 css wordpress skew revolution-slider

本文介绍了倾斜/倾斜仅div的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直试图在div的底部添加倾斜/倾斜.正如您在下面的示例中看到的那样，我已经取得了一些成功，我已经成功地将偏斜应用于页面上的两个元素.

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三角形实现此效果

代替使用skew会改变整个盒子的透视图，您可以使用伪元素在图像顶部覆盖一个三角形，以产生一个倾斜的盒子效果.

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.

使用:after伪元素可以将内容添加到页面中，而无需额外的标记
使用CSS三角形将此伪元素制作成一个倾斜的三角形(与页面背景颜色相同)，该三角形跨越整个框的宽度.这给人的感觉是盒子本身是倾斜的

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

从#main-slideshow和.tp-bgimg

transform

添加规则.tp-bgimg:after以创建伪元素.将以下值添加到此规则:

border-color: transparent transparent #FFFFFF transparent;，border-style: solid;，border-width: 0 0 10vw 100vw;，height: 0;和width: 0;创建三角形.当图像跨越页面的整个宽度时，视口单位可用于使三角形具有响应性
bottom: 0;，position: absolute;和left: 0;将三角形放置在容器底部
content: "";

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>

这篇关于倾斜/倾斜仅div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

倾斜/倾斜仅div的底部 [英] Slant/Skew only bottom of div

问题描述

推荐答案

您可以使用伪元素和CSS三角形实现此效果

You can achieve this effect using pseudo elements and CSS triangles

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

倾斜/倾斜仅div的底部 [英] Slant/Skew only bottom of div

问题描述

推荐答案

您可以使用伪元素和CSS三角形实现此效果

You can achieve this effect using pseudo elements and CSS triangles

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭