设定倾斜的边缘

问题描述 投票:3回答:2

我只是歪曲了一个作为横幅的部分。

由于歪斜,现在这一部分的高度明显高于预期。

如何根据这个新高度定义我的底部边距?

.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>

如果你打开全屏幕片段并更改窗口大小,你知道我的意思......内容只是隐藏在横幅后面。

提前致谢!

html css css-transforms skew
2个回答
1
投票

实际上,大小会根据宽度而变化,因此根据宽度更新边距,因为您可以使用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>

1
投票

您也可以使用相同的转换来扭曲.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>
© www.soinside.com 2019 - 2024. All rights reserved.