📝 CSS-Tricks 194: Diagonal layouts, fancy animations, and debugging CSS

View this newsletter on the web.

Normal layouts? Humbug! Let’s get diagonal instead.

Nils Binder shows us how to create diagonal layouts and he made this cool demo in Codepen to show how that’s possible:

There are a bunch of ways to do this sort of thing but Nils shows how to do it with CSS transforms, like this:

.diagonal-box { transform: skewY(-11deg); }

And as Nils mentions, this will skew all the content within that element so you’ll need to reverse the transform for the content within it:

.diagonal-box-content { transform: skewY(11deg); }

Then some fancy math is used to handle the padding inside to make sure the content lives in a “safe area”. This is a smart technique that I’m sure I’ll have to use at some point in the future!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s