如何更改 div 的形状，同时保持其与普通 div 的功能？

Question

我看到了下面的设计，并想在我的网络应用程序中实现类似的东西，但是如何使 div 倾斜在顶部（如图所示）？

我的输出：

<div class="" style="height: 100vh; background-color: white"></div>
<div class="" style="height: 100vh;position: relative; border: 2px solid black;">
  <div class="" style="height: calc(50% + 2rem);background-color: white;"></div>
  <div class="" style="height: calc(50% - 2rem);background-color: blue;"></div>
  <h1 style="position: absolute; top: 50%; z-index: 9; transform: translateY(-50%); transform: rotate(-2deg); text-align: center;width: 100%; background-color: yellow; height: 4rem">WELCOME TO OUR WEBSITE</h1>
</div>
<div class="" style="height: 100vh; background-color: blue"></div>

我也尝试过顺风倾斜和变换旋转，但不幸的是我得到了水平滚动条并且转动div后有空白

预期： 与我发布的第一张图片类似，我想使用顺风制作一个适当的响应式倾斜 div。它应该是全宽，顶部倾斜，具有双色调颜色和直底部。

Answer 1

您需要组合变换：translateY（-50%）和rotate（-2deg）。下面的代码可以帮助你

<div class="" style="height: 100vh; background-color: white"></div>
<div class="" style="height: 100vh;position: relative; border: 2px solid black;">
  <div class="" style="height: calc(50% + 2rem);background-color: white;"></div>
  <div class="" style="height: calc(50% - 2rem);background-color: blue;"></div>
  <h1 style="position: absolute; top: 50%; z-index: 9; transform: translateY(-50%) rotate(-2deg); text-align: center; width: 100%; background-color: yellow; height: 4rem; padding-top: 20px;">WELCOME TO OUR WEBSITE</h1>
</div>
<div class="" style="height: 100vh; background-color: blue"></div>