Slant/Skew only bottom of div Example code
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;
andwidth: 0;
create the triangle. As the image spans the entire width of the page viewport units can be used to make the triangle responsivebottom: 0;
,position: absolute;
andleft: 0;
position the triangle at the bottom of the containercontent: "";
is required for the pseudo element to appear
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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> |