我只是歪斜了用作横幅的部分.
现在,由于倾斜,此部分的高度明显高于预期.
如何根据这个新高度定义我的底部边距？
.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>