首页 > web前端 > css教程 > 如何将CSS倾斜的容器分3个步骤

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

尊渡假赌尊渡假赌尊渡假赌
发布: 2025-03-14 09:30:13
原创
659 人浏览过

How to Make CSS Slanted Containers in 3 Steps

最近更新个人作品集时,想在网站主要布局中使用斜线 (/) 作为视觉元素。之前从未尝试过在 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板