我只是歪曲了一个作为横幅的部分。
由于歪斜,现在这一部分的高度明显高于预期。
如何根据这个新高度定义我的底部边距?
.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>
如果你打开全屏幕片段并更改窗口大小,你知道我的意思......内容只是隐藏在横幅后面。
提前致谢!
实际上,大小会根据宽度而变化,因此根据宽度更新边距,因为您可以使用unit vw
。
.banner{
transform: skewY(-5deg);
transform-origin: top right;
outline: solid 1px black;
margin-bottom: 9vw;
}
<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>