Use rotate() and skew() together to introduce some clean Punk Rock to your CSS

The web design industry is going to start looking very different very soon. Literally.

With all the tools we’re gaining in CSS, designers are going to have new ability to experiment. I wrote about some of those tools on CSS Tricks: Five Design Fears to Vanquish with CSS Grid.

I’m still convinced that taking inspiration from punk rock design of the 70s and 80s is going to be a trend.

If you want to start small, introduce some angles to your design. This is a simple trick to angle a stripe of content without adding awkward white space.

Start with a regular stripe

We all know this design pattern: full width background and nice promotional content.

We set up very simple markup:

<section class="stripe">
    <h1>Check this regular stripe</h1>
    <p>If you're wanting to get into punk-rock design, rotated areas are really cool and you'll look hip and cool.</p>
</section>

Add a pinch of very simple CSS and we’re done.

.stripe {
    background-image: linear-gradient(240deg, #eaee44, #90ec19);
    padding: 5rem;   
}

This is a lovely serviceable stripe of content. You also get to dig on a nice linear-gradient while you’re there.

Use transform: rotate() to introduce the angle

The transform CSS property has a load of great functions. One of the easiest functions to use is rotate(). It takes an angle unit such as 45deg and rotates the element by that amount. A positive integer is a clockwise turn and negative is a counter-clockwise turn.

.stripe {
    background-image: linear-gradient(240deg, #eaee44, #90ec19);
    padding: 5rem;

    transform: rotate(-5deg);
}

You’ll notice from the photo that this introduces an issue. This is still a rectangle and by rotating the rectangle, we see the corners.

This doesn’t feel professional, so we need this to stay flush to the browser edge.

skew() to the rescue

By taking the same angle we used in our rotate() function, we can skew the element back. This angles the left and right sides of our element back to their starting points.

The transform property can take multiple functions, so we apply it on the same line of CSS.

.stripe {
    background-image: linear-gradient(240deg, #eaee44, #90ec19);
    padding: 5rem;

    transform: rotate(-5deg) skew(-5deg);
}

The discerning designer eye will notice one more issue with our implementation. The text is now skewed. This may be something you want. The skewed text bothers me slightly, so let’s unskew it.

Time to unskew the text

I’m not a huge fan of introducing new markup for styling if I can avoid it, but with the introduction of a content container, we can fix our text skew.

Chances are decent, you had a container here anyway to set a width on your content.

By applying a skew of the negative angle we’ve been using, the text will re-skew back to its initial angle. You can also use this method to un-rotate the text, as well, if that’s your need.

Full Markup:

<section class="stripe">
    <div class="stripe__content">
        <h1>Check this rotation with the straight edges and non-skewed text!!!</h1>
        <p>If you're wanting to get into punk-rock design, rotated areas are really cool and you'll look hip and cool.</p>
    </div>
</section>

Full CSS:

.stripe {
    background-image: linear-gradient(240deg, #eaee44, #90ec19);
    padding: 5rem;

    transform: rotate(-5deg) skew(-5deg);
}
.stripe__content {
    transform: skew(5deg);
}

This gives us clean lines with a hint of punk rock. See this in action on CodePen.

If you’re still doing things the same way you’ve always done them, it’s time to spice things up. Adding angles is an easy and painless way of tossing some cayenne into your design process.

Stay up to date with Bryan

If you want to stay up to date with all the content I'm producing, be sure to follow me here, but also on other platforms as well.

• Twitter: @brob
• YouTube for my videos
• My Patreon for early updates
• Watch or request a Design or Code Review at peerreviews.dev

Comments

[Tero Y]

Is there a downside in, instead of styling .stripe__content, just reversing the skewing in the children of the stripe element?

.stripe > * {
    transform: skew(5deg);
}

[Bryan Robinson]

Hey Tero! Great question.

If you're referring to being able to remove the extra container (and I agree with the sentiment of keeping your HTML clean and semantic), you do have some additional hoops to jump through. In the end, you get a left edge of your text that isn't as clean because of the way the individual skews take place. Take a look at this codepen fork:

codepen.io/brob/pen/jjYGep?editors...

If you're asking about keeping the HTML the same and using a universal selector instead of a class, that would work just fine. The drawback there would be a loss of control. If another HTML element came into the area outside of the content div, it would take part in the unskew even if you didn't want it to. An element like a ::before or ::after would do this. It might have unintended consequences, but it would work just fine.

[Henry Quinn]

🤘