如何创建 CSS 倾斜容器

我正在更新我的投资组合，并希望使用正斜杠 (/) 作为网站主要布局的视觉元素。我以前从未尝试在 CSS 中创建倾斜容器，但乍一看似乎很容易。然而，当我开始深入研究时，实际上有几个非常有趣的挑战，才能得到一个支持文本和媒体的有效 CSS 倾斜容器。

以下是我的尝试过程以及最终结果

我首先寻找允许文本在非矩形容器内自然流动的示例。我假设用 CSS 可以实现，因为像 Adobe Illustrator 和 Microsoft Word 这样的程序已经可以做到很多年了。

步骤 1：使用变换创建 CSS 倾斜容器

我找到了 CSS 形状模块，它非常适合 简单的文本内容，如果我们使用 shape-outside 属性。它甚至可以完全对齐文本。但是它无法让内容在容器内滚动。因此，当用户向下滚动时，整个倾斜容器似乎向左移动，这不是我想要的效果。相反，我采取了一种更简单的方法，在容器中添加 transform: skew()。

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

这是一个很好的开始！容器确实倾斜了，并且滚动按预期工作，而纯 CSS 处理了图像的大小调整。然而，明显的问题是文本和图像也变得倾斜，使内容更难阅读，图像也变得失真。

步骤 2：反转字体

我尝试了几种方法用 CSS 解决倾斜文本和图像的问题，但最终找到了一个更简单的解决方案：使用 FontForge 创建一个新字体来反转文本的倾斜。

FontForge 是一个开源字体编辑器。我为网站的主要内容选择了 Roboto Condensed Light，因此我下载了 .ttf 文件并在 FontForge 中将其打开。从那里，我选择了所有字形，并应用了 14deg 的倾斜来弥补容器上的 CSS 变换造成的倾斜。我将新字体文件保存为 Roboto-Rev-Italic.ttf，并从我的样式表中调用它。

好了。现在字体以与容器倾斜量相同的量向相反方向倾斜，从而抵消了这种影响，使内容看起来像我最初使用的正常 Roboto 字体。

步骤 3：优化图像和视频

这对文本来说效果很好！选择文本甚至正常工作。从那里，我所需要做的就是使用负 skew() 值反转块级图像和视频元素的倾斜，该值抵消了应用于容器的值

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

不过，我最终将图像和视频包装在额外的 div 中。这样，我可以为它们提供漂亮的背景，这些背景似乎与容器很好地对齐。我所做的是连接到 ::after 伪元素，并使用一个背景将其定位，该背景延伸到倾斜容器的左边缘和右边缘之外。

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

最终演示

这是最终的演示

我目前在我的 个人网站 上使用这种效果，到目前为止我很喜欢它。但是您是否尝试过使用不同的方法来实现类似的效果？如果您有，请在评论区告诉我，以便我们互相交流经验！