如何将CSS倾斜的容器分3个步骤

最近更新个人作品集时，想在网站主要布局中使用斜线 (/) 作为视觉元素。之前从未尝试过在 CSS 中创建倾斜容器，但乍一看似乎很容易。然而，当我深入研究时，实际上要创建支持文本和媒体的有效 CSS 斜角容器，面临一些非常有趣的挑战。

以下是我的尝试过程和最终成果：

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

步骤 1：使用转换创建 CSS 斜角容器

我找到了 CSS Shapes 模块，如果我们使用 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%;
}

最终演示

这是最终演示：

我现在在我的个人网站上使用此效果，到目前为止非常喜欢它。但是您是否尝试过其他方法来实现类似的效果？请务必在评论中告诉我，以便我们进行比较！

以上是如何将CSS倾斜的容器分3个步骤的详细内容。更多信息请关注PHP中文网其他相关文章！