Create an area that ends with in a triangle

I wanted to create a website header where a background is a large quadrilatere that ends (bottom) with a triangle. So the top is like a rectangle and the two points at the bottom are not at the same level (one is higher than the other, the Y coordinate are different.)

It took me some time on how to do that without using multiple images or multiple divs, etc. And really to make it work cleanly we need an image as a background.

So the image should be large enough for a full screen desktop (crazy big for some these days, mine was big for a while at 1920x1080, now it's a dwarf, right?! regular tablets have that resolution...) and then also work on a smart phone "tiny" screen, without us having to write one line of JavaScript code.

So, we want to use CSS and a background... what type of an image would auto resize like that on cell phones you ask? An SVG image.

What I created is a parallelogram image as shown here. A rectangle with one point at the bottom which is off.


This can then be added to your DIV tag background as so:

background: url(triangle.svg) 0 0;
background-size: 100% 100%;

The background-size parameter is important, that's what makes the shape fill the entire area.

Now, on screens that are really small or really large, the angle at the bottom is going to be wrong. But in most cases it will be quite effective. And the image, since it is an SVG, is not even 2Kb in size. As a JPEG or a PNG, it would be in the Mb and resize slowly and likely with ragedy edges...