Slant/Skew only bottom of div Example code

By tutspointer Last updated Oct 21, 2020

Here 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

CSS:

* {
  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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

* {

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;

}

HTML:

<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="https://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>

<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">

<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>

</li>

</ul>

</div>

</div>

</div>

</body>