A popular web design trend I've noticed over the past year or so has been full-width slanted backgrounds. Here are some ways to achieve the look.

SVG

Create a slanted 4-sided polygon in SVG. Set the width of the SVG to 100% or 100vw. In this example I've also added an svg filter to achieve a box-shadow effect.

Worst Option: Gradient

This is the trick of using a gradient that doesn't appear to be a gradient. By setting two color stops at the same position, colors that would normally fade into each other instead appear entirely separate. You can then specify the degree to which the gradient will be angled.

The edge's of the two colors look jagged (I've added a tiny black color-stop so that it doesn't look so bad). It's also the least adaptable method (you can't, for example, put a box-shadow on a gradient).

Third Option: Skew & Rotate

Then there's this method from @28inch.

See the Pen xbZxGm by Balázs Sziklai (@28inch) on CodePen.

Alternative SVG Method

svg as CSS pseudo-content

If I told you the above example was an SVG, you may assume that the entire gray shape is one single vector graphic. In fact it's a regular div with a background-color the same as the fill color of an SVG triangle. The triangle is then placed at the top using the :before or :after CSS selector. Here's why this may be a good idea: In my first SVG example I'm using SVG text rather than a HTML paragraph or heading element to embed my text on top of the SVG shape. Writing and positioning SVG text is easy enough, but in general its easier to position and arrange HTML text elements in our documents. Technically, we could use the SVG foreignObject tag to insert HTML into our SVG, between the opening and closing SVG tags. It's easier to just write HTML the way we normally do. We could place normal HTML text on top of a big SVG shape used as a background by using some CSS positioning. Attaching an SVG to the top or bottom of a HTML element is easier, and is my favourite method for achieving a cool slanted look.


10,930 7 180