HTML 页面斜向分割且内容垂直
时间: 2024-02-05 09:05:37 浏览: 126
要在 HTML 页面上实现斜向分割且内容垂直的布局,可以使用 CSS 的 transform 和 rotate 属性。以下是一个简单的示例:
```
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
height: 100vh;
overflow: hidden;
}
.left {
transform: rotate(-10deg);
background-color: #F5F5F5;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.right {
transform: rotate(10deg);
background-color: #FFF;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 3rem;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h1>Left Content</h1>
</div>
<div class="right">
<h1>Right Content</h1>
</div>
</div>
</body>
</html>
```
在上面的代码中,我们创建了一个名为 container 的 div 元素,它使用了 flexbox 布局,并设置了高度为 100vh(视窗高度)。同时,我们也将 overflow 属性设置为 hidden,以防止内容溢出。
接下来,我们创建了两个子元素:left 和 right。为了使它们斜向分割,我们使用了 transform 和 rotate 属性,并将它们旋转了 10 度和 -10 度。
最后,我们使用了 flexbox 的 align-items 和 justify-content 属性,使内容垂直居中,并将 h1 元素的 margin 设置为 0,以去除默认的间距。
这样就可以实现斜向分割且内容垂直的布局了。