Skew Transform

The skew() transform tilts an element along the horizontal axis, the vertical axis, or both — creating a parallelogram-like distortion.

Syntax

transform: skew(x-angle, y-angle). skewX(angle) and skewY(angle) skew on a single axis. Angles are in deg (or other angle units).

Common Uses

Diagonal section dividers without images
Decorative headline accents
Dynamic, energetic UI effects

Skewing Parent vs Child

A common pattern skews a parent element then counter-skews the child to keep the content upright.

Example

/* Skewed divider between sections */
.section-divider {
    background: #1a73e8;
    height: 80px;
    transform: skewY(-3deg);
    margin: -40px 0;
}

/* Diagonal button / label */
.slash-badge {
    display: inline-block;
    background: #e53935;
    color: #fff;
    padding: 4px 16px;
    transform: skewX(-12deg);
}
/* Counter-skew the text to keep it upright */
.slash-badge span {
    display: inline-block;
    transform: skewX(12deg);
}

/* Skewed hero separator */
.hero::after {
    content: "";
    display: block;
    height: 60px;
    background: #fff;
    transform: skewY(2deg);
    transform-origin: top left;
    margin-top: -30px;
}

/* Two-axis skew */
.warp {
    transform: skew(15deg, 5deg);
}

CSS

Full Editor

Pro Tip

When skewing a container, counter-skew the direct children to keep text and images upright. Apply transform: skewX(-angle) on the child to cancel the parent's skew.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned