Slant/Skew 仅底部 div
Slant/Skew only bottom of div
我一直在尝试将 Skew/Slant 添加到 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 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>
提前感谢您的帮助，如果我能提供更多信息，请告诉我。
您可以使用伪元素和 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 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>
我一直在尝试将 Skew/Slant 添加到 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 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>
提前感谢您的帮助，如果我能提供更多信息，请告诉我。
您可以使用伪元素和 CSS 三角形实现此效果
您可以不使用 skew 来改变整个盒子的视角，而是使用伪元素在图像顶部叠加一个三角形，以产生倾斜盒子的效果。
该技术的一般原理是：
- 使用
:after伪元素允许将内容添加到页面而无需额外标记 - 使用CSS三角形使这个伪元素成为横跨盒子宽度的倾斜三角形（与页面背景颜色相同）。这给人的印象是盒子本身是倾斜的
需要进行以下修改：
- 从
#main-slideshow和.tp-bgimg 中删除 - 添加规则
.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: "";才能出现伪元素
transform 属性
* {
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>