Kyle Dharam

The reason for targeting direct children instead of all children is to apply the skew effect only to the parent while keeping the content inside the direct children upright.

.parent {

transform: skewY(-10deg); // Skew the parent

> .child { // Target only direct children

transform: skewY(10deg); // De-skew direct children to keep them straight}

}