DEV Community

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

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

Bryan Robinson on January 24, 2018

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 ...
Collapse
 
quinncuatro profile image
Henry Quinn

🀘

Collapse
 
teroyks profile image
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);
}
Collapse
 
brob profile image
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.