Skew
Learn to skew elements with skew().
The skew() function
skew() tilts an element; it slides the corners along the horizontal or vertical axis to give a parallelogram look. skew(20deg) tilts 20 degrees horizontally.
With two values, the first applies to the X axis and the second to Y: skew(10deg, 5deg). This is the short way to tilt both axes in one line.
skewX and skewY
To tilt one axis, use skewX() and skewY(). skewX(15deg) lays the horizontal edge; skewY(15deg) lays the vertical edge.
These functions add a dynamic feel to a heading or a tag. Choosing a single axis keeps the result predictable; it is more controllable than skewing both at once.
Parallelogram with skew
For a badge or ribbon design, skewX(-10deg) gives a slanted strip. To keep the text inside upright, apply skewX(10deg) to the child element.
This 'skew then unskew' technique is the standard way to show straight text inside a slanted frame. The strip keeps its look while text stays readable.
Exercise Skewed badge
Write a .badge selector and add the declaration transform: skewX(-10deg) inside. The badge should tilt left along the horizontal axis.
Show example solution
/* add a skew for the badge */
.badge {
transform: skewX(-10deg);
}Test yourself
-
What does skew(15deg) do?
.ribbon { transform: skew(15deg); }- Tilts the element 15 degrees horizontally
- Moves the element 15 pixels right
- Grows the element 15 times
- Rotates the element 15 degrees
Show answer
Tilts the element 15 degrees horizontally — Correct. skew(15deg) tilts the horizontal axis by 15 degrees; it gives a parallelogram look.
-
Write the skewX function
.ribbon { transform: ____(15deg); }Show answer
.ribbon { transform: skewX(15deg); } -
Match each function to its axis
- skewX
- Horizontal axis
- skewY
- Vertical axis
- skew
- Both axes
- rotate
- Rotates, no skew