#yyds干货盘点#如何制作 CSS 倾斜容器

第 1 步：制作一个带有变换的 CSS 倾斜容器

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

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

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

第 2 步：反转字体

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

​​FontForge​​​是一个开源字体编辑器。我选择了​​Roboto Condensed Light​​​作为网站的主要内容，所以我下载了​​.ttf​​​文件并在 FontForge 中打开它。从那里，我选择了所有字形并应用了 skew​​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%;
}