Skewed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur reprehenderit deserunt ipsam debitis porro, cumque incidunt. Eveniet, quaerat consectetur?

The idea is to skew the ::before pseudo element.

To calculate the padding using the tan() function like this.

The other method is is use a clip-path property on the element. This allows you to use border-radius as well as more control on the element. For example you could have horizontal lines at the top of the header and bottom of the footer. You can also use background images too without them being distored.

The formula tan x = opp/adj.

• x is the angle
• opp is the side opposite the angle
• adj is the side of the angle that is not the hypotonuse.

The angle, x, is the one above the header on the left.
The opposite side is the value we want.
The adjacent side is the width of the container.
To get the size of the opp side use: adj * (tax x) = opp

The tangent calculator might be useful.