Slanted Background Images for Divs CSS - html

Question

Please check out this website template http://www.gt3themes.com/website-templates/timber/#. I am trying to recreate the effect they do on the masthead image with the wood background. They create a slanted bottom on the background image without any css transforms or anything. They use a border of 3000px on the left side and 150px on the bottom. However, I am unsure how the 3000px border on the left creates the effect. If I reduce the left border, then the slant goes away. Can anyone explain how they are creating this effect? Thanks.

Answer 1

They are using a png that is added with css to sit on top of the image:
http://www.gt3themes.com/website-templates/timber/images/sliderL.png
.headerLine:after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
/* background: url(../images/sliderL.png) center center no-repeat; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 150px solid white;
border-left: 3000px solid transparent;
}

Answer 2

Change the css to
.line2:after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
/* height: 240px; */
/* background: url(../images/sliderL.png) center center no-repeat; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 150px solid rgb(56, 156, 38);
border-left: 3000px solid rgba(146, 31, 31, 0.89);
}
And you will see the trick. It's a classic border triangle. The border bottom is originally white, and is hiding the bottom of the image . the border left is transparent, and is needed to create the triangle effect.

Answer 3

The borders applied to the :after element is key here. Essentially, an element has 4 border points - top, bottom, left and right. If you imagine the borders on an element like you would the borders of a picture frame you'll find that the connecting point of each of these borders is at the edges of the element. Nothing special there. But when you increase the size of the borders, you'll notice that if the border has equal width on all the sides, the connecting points are at an angle and forms a straight line from the inner edge of the element to the outer edge.
This JSFiddle will give you an idea of what I'm talking about: http://jsfiddle.net/dzul1983/d8fvfuLs/
We can create triangles simply by manipulating the border widths, as demonstrated here: http://jsfiddle.net/dzul1983/d8fvfuLs/3/
So by manipulating the left and bottom borders, we can replicate the effects seen on the Timber page. You should now have an idea of how it works, and understand what you need to do to replicate this effect for your purposes.