How to Make CSS Slanted Containers in 3 Steps

When I recently updated my personal portfolio, I wanted to use slashes (/) as visual elements in the main layout of the website. Never tried creating tilted containers in CSS before, but at first glance it seems easy. However, when I dig deeper, I actually had some very interesting challenges to create an effective CSS bevel container that supports text and media.

Here are my trial and final results:

I first look for examples of non-rectangular containers that allow text to flow naturally inside it. I'm assuming this can be implemented in CSS, as programs like Adobe Illustrator and Microsoft Word have been doing this for years.

Step 1: Create a CSS bevel container using transformation

I found the CSS Shapes module, which is perfect for simple text content if we use the shape-outside property. It even aligns the text completely. But it can't let the content scroll inside the container. So when the user scrolls down, the entire tilt container seems to move to the left, which is not the effect I want. Instead, I took a simpler approach, which is to add transform: skew() to the container.

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

This is a good start! The container does tilt and the scroll works as expected, while pure CSS handles the resizing of the image. However, the obvious problem is that the text and images are also tilted, making the content more difficult to read and the image is distorted.

Step 2: Reverse tilt font

I tried several ways to solve the problem of skewing text and images in CSS, but ended up coming up with an easier solution: create a new font using FontForge to reverse the skewing of the text.

FontForge is an open source font editor. I chose Roboto Condensed Light for the main content of the website, so I downloaded the .ttf file and opened it in FontForge. There, I selected all glyphs and applied a 14deg tilt to compensate for the tilt caused by the CSS conversion on the container. I save the new font file as Roboto-Rev-Italic.ttf and call it in my stylesheet.

That's it. The font now tilts in the opposite direction with the same amount as the container tilt, thus offsetting these effects, making the content look like the normal Roboto font I originally used.

Step 3: Optimize Images and Videos

This works very well for text! The function of selecting text is also normal. From there, I just need to reverse skew skew() values ​​to offset the values ​​applied to the container:

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

I did end up wrapping the images and videos in an extra div, though. This way I can give them a nice background that seems to align perfectly with the container. What I did is connect to the ::after pseudo-element and position it using a background that goes beyond the left and right edges of the tilted container.

 img::after,
video::after {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

Final Demo

Here is the final demonstration:

I'm using this effect on my personal website now and I've loved it so far. But have you tried other ways to achieve similar effects? Be sure to let me know in the comments so we can compare!

The above is the detailed content of How to Make CSS Slanted Containers in 3 Steps. For more information, please follow other related articles on the PHP Chinese website!