re: Use rotate() and skew() together to introduce some clean Punk Rock to your CSS VIEW POST


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);

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:


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.

code of conduct - report abuse