html - 设置倾斜边距
问题描述
我只是歪斜了一个用作横幅的部分。
现在,由于偏斜,这部分的高度显然比预期的要高。
如何根据这个新高度定义下边距?
.banner{
transform: skewY(-5deg);
transform-origin: top right;
outline: solid 1px black;
margin-bottom: 5rem;
}
<section class="banner">
<h1>Hello World!</h1>
<h2>Subtitle</h2>
</section>
<div class="content">
<p>CONTENT</p>
</div>
如果您全屏打开片段并更改窗口大小,您就会明白我的意思......内容只是隐藏在横幅后面。
提前致谢!
解决方案
您还可以.content
使用相同的转换倾斜,然后取消倾斜里面的内容:
.banner {
transform: skewY(-5deg);
transform-origin: right;
outline: solid 1px black;
}
.content {
transform: skewY(-5deg);
transform-origin: right;
}
.content p {
transform: skewY(5deg);
transform-origin: left;
}
<section class="banner">
<h1>Hello World!</h1>
<h2>Subtitle</h2>
</section>
<div class="content">
<p>CONTENT</p>
</div>
推荐阅读
- python - 使用朴素贝叶斯分类的 Twitter 情绪分析仅返回“中性”标签
- laravel - 如何在 laravel 中捕获 NotFoundHttpException 以发送自定义响应?
- python - numpy 打印矩阵一行一行
- swift - 如何使用 Mabox 和 Swift 检索我下载的离线地图包的列表?
- node.js - 无法从cheerio 中的 img 标签获取正确的链接。获取错误的链接格式
- project-reactor - reactor-core 3.1 版破坏了现有代码
- mysql - 找到每个项目中至少有一个的用户
- visual-studio-code - ejs 标签的制表符补全,例如 <% %>
- php - Chrome 未删除自动填充选择时输入的文本
- javascript - Firebase:在 FirebaseAuth 中创建的新用户上触发 Firestore 中的事件