仅倾斜/倾斜 div 的底部 [重复]

Posted

技术标签:

【中文标题】仅倾斜/倾斜 div 的底部 [重复]【英文标题】:Slant/Skew only bottom of div [duplicate] 【发布时间】:2016-12-25 11:11:26 【问题描述】:

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

目前,Skew 应用于容器的顶部和底部,它似乎在底部和顶部的一半处停止,然后回到直边。

我想要实现的是上边缘是直的,而下边缘是倾斜的,例如:

* 
  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   title="visiontech-hero-test" class="rev-slidebg defaultimg"  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>

提前感谢您的帮助,如果我可以提供更多信息,请告诉我。

【问题讨论】:

您可以使用伪元素来实现这一点。请您在问题本身中包含所有相关代码,以便我们重现您的问题。外部链接不适合,因为可能会死掉或问题得到解决,使这个问题失去上下文。 你好,我已经包含了我所有的自定义 CSS。其他代码由 wordpress 和革命滑块生成。如果将其粘贴进去,那对您有用吗? 嗨@Chris,我们需要的是一个最小的例子***.com/help/mcve。在这种情况下,ID 为#main-slideshowdiv 的HTML 可能就是我们需要的以及影响它的所有样式。 我希望我添加的内容是有用的,rev 滑块的很多样式似乎都在 HTML 中。 我认为它不起作用,因为 Revolution Slider 是通过 CSS 插入图像,而这需要一个实际的图像标签。 【参考方案1】:

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

除了使用skew 来改变整个盒子的视角,您还可以使用伪元素在图像顶部覆盖一个三角形,以产生倾斜盒子的效果。

这种技术的一般原理是:

使用:after 伪元素允许将内容添加到页面而不需要额外的标记 使用 CSS 三角形将这个伪元素变成一个倾斜的三角形(与页面背景颜色相同),它跨越了框的宽度。这给人的印象是盒子本身是倾斜的

需要进行以下修改:

#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: ""; 是伪元素出现所必需的

* 
  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   title="visiontech-hero-test" class="rev-slidebg defaultimg"  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 是否可以以相同的方式运行倾斜但在 div 的顶部而不是底部?还是从右往左走。我试过玩你的css并设法改变某些东西,但不能完全得到我想要的。谢谢 @Chris。是的,更改边框以修改三角形的方向并将其定位在top 而不是bottom。 jsfiddle.net/yc9n0jpm 非常感谢。我颠倒了边界,但没有从下到上改变。 没问题@Chris。

以上是关于仅倾斜/倾斜 div 的底部 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

HTML中的向下倾斜引号(«和»)[重复]

画布fillRect高度和宽度总是倾斜/扭曲[重复]

Hive数据倾斜优化:两个亿级表join

如何制作响应式倾斜多边形 div?

在不改变背景的情况下对倾斜的 div 进行悬停效果

Hive参数优化和数据倾斜