Slant/Skew only bottom of div Example code

140

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:

HTML:

 

 

Leave A Reply

Your email address will not be published.