📅 最后修改于: 2023-12-03 14:51:51.200000 🧑 作者: Mango
在 CSS 中，我们可以使用 transform 属性来倾斜一个元素。为了创建倾斜的背景，我们可以利用伪元素和 CSS 渐变来实现。
以下是一个基本的示例代码，展示如何创建倾斜的背景：
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(to right bottom, #ff00ff, #00ffff);
overflow: hidden;
}
.tilted-background {
position: relative;
width: 100%;
height: 100%;
transform: skewY(-12deg);
transform-origin: top left;
margin-top: -200px;
}
.tilted-background::before {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 200%;
background: linear-gradient(to right bottom, #ffffff, transparent);
transform: skewY(12deg);
transform-origin: top right;
}
</style>
<body>
<div class="tilted-background"></div>
<!-- 在这里添加你的内容 -->
</body>
这段代码演示了如何创建一个倾斜的背景。首先，我们设置了 body 元素的高度为视口高度，并使用 linear-gradient 创建一个渐变背景。然后，我们使用伪元素 ::before 创建了一个与背景相反倾斜的层，使得倾斜部分的颜色逐渐透明。通过调整 transform 属性的值，你可以改变倾斜的角度和方向。
将上述代码加入你的 HTML 文件中，你就可以看到创建的倾斜背景效果了。
希望这个简单的示例可以帮助你了解如何使用 CSS 创建倾斜背景！