Slanted CSS Containers Without the Headaches

Creating a slanted container in CSS sounds easy—just apply a transform and move on. But when the container has to hold readable text and properly displayed media, the simple approach quickly falls apart. Here's a practical path to getting it right without warping your content.

Why a Simple skew() Isn't Enough

The CSS Shapes Module and its shape-outside property work well for letting text flow around a slanted edge, but they don't let the content scroll inside the container. That makes the whole block appear to slide sideways as the page scrolls, which isn't the desired behavior.

A more straightforward route is applying transform: skew() to the container:

.slant-container {
  transform: skew(14deg);
}

This does slant the container, and scrolling behaves as expected. But it also slants the text and images inside, making content harder to read and distorting visuals. The fix needs to happen at the content level, not just the container.

Counter-Slanting the Text

One effective solution is to create a custom font that's skewed in the opposite direction of the container. This cancels out the visual slant on the text, leaving it looking like the original typeface while sitting inside the slanted container.

With the open-source font editor FontForge, you can open the font file (e.g., a .ttf for Roboto Condensed Light), select all glyphs, and apply a skew of 14deg to compensate for the container's CSS transform. Save the result as a new file—like Roboto-Rev-Italic.ttf—and load it in your stylesheet.

A screenshot of FontForge displaying glyphs from the Roboto font file in square tiles. The letters and symbols are slanted toward the left, opposite of a normal italic font style.

Now the text appears upright and crisp, and text selection still works normally. The font is slanted in the opposite direction by the same amount as the container, so the two effects cancel out.

Fixing Images and Videos

The same logic applies to block-level media. Give images and videos a negative skew() value that offsets the container's slant:

img,
video {
  transform: skew(-14deg);
}

In practice, wrapping media elements in extra divs helps too. You can then use the ::after pseudo-element to draw a background that extends past the slanted container's left and right edges, giving the media a clean, square frame that aligns visually with the container's bounds.

img::after,
video::after {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}
It’s subtle, but notice that the top-right and bottom-left corners of the image are filled in by the background of its ::after pseudo-element, making things feel more balanced.

Bringing It Together

The final result is a slanted container that supports regular text, readable custom fonts, and properly framed media—all with standard CSS transforms and a one-time font adjustment. It's a technique you can apply directly to a portfolio or any layout where non-rectangular sections need to stay usable.