如何修改Div形状并保留功能？用Tailwind实现顶部倾斜响应式Div

我需要实现顶部倾斜、底部平直的双色全宽Div，类似参考设计的效果，但之前用旋转、skew属性时出现水平滚动条和空白区域，当前代码效果不符合预期。

当前尝试的代码 #

<div style="height: 100vh; background-color: white"></div>
<div style="height: 100vh;position: relative; border: 2px solid black;">
  <div style="height: calc(50% + 2rem);background-color: white;"></div>
  <div 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 style="height: 100vh; background-color: blue"></div>

解决方案：两种Tailwind实现方式 #

方法1：用clip-path精准裁剪倾斜边界

通过自定义clip-path实现顶部倾斜的形状，同时避免内容溢出产生滚动条：

<!-- 顶部白色全屏区块 -->
<div class="h-screen bg-white"></div>

<!-- 核心倾斜双色区块 -->
<div class="relative h-screen overflow-hidden">
  <!-- 白色上半部分（顶部倾斜） -->
  <div class="absolute inset-0 bg-white [clip-path:polygon(0_0,100%_0,100%_calc(50%-2rem),0_50%)]"></div>
  <!-- 蓝色下半部分 -->
  <div class="absolute inset-0 bg-blue-500 [clip-path:polygon(0_50%,100%_calc(50%-2rem),100%_100%,0_100%)]"></div>
  <!-- 居中倾斜标题 -->
  <h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] w-full text-center bg-yellow-400 h-16 flex items-center justify-center">WELCOME TO OUR WEBSITE</h1>
</div>

<!-- 底部蓝色全屏区块 -->
<div class="h-screen bg-blue-500"></div>

说明：

• clip-path: polygon() 定义了倾斜的边界，调整calc(50%-2rem)里的2rem可以控制倾斜幅度
• 父容器加overflow-hidden，防止裁剪后的内容溢出产生滚动条
• 用top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2实现精准居中，避免重复transform覆盖问题

方法2：用伪元素实现倾斜分隔线

如果需要更直观的调整方式，用伪元素做倾斜的分隔条，覆盖在双色区块之间：

<!-- 顶部白色全屏区块 -->
<div class="h-screen bg-white"></div>

<!-- 核心倾斜双色区块 -->
<div class="relative h-screen">
  <!-- 白色上半部分 -->
  <div class="h-1/2 bg-white"></div>
  <!-- 蓝色下半部分 -->
  <div class="h-1/2 bg-blue-500"></div>
  <!-- 倾斜白色分隔条，实现顶部倾斜视觉效果 -->
  <div class="absolute top-1/2 left-0 w-full h-8 bg-white -rotate-2 origin-top-left"></div>
  <!-- 居中倾斜标题（z-10确保在分隔条上方） -->
  <h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] w-full text-center bg-yellow-400 h-16 flex items-center justify-center z-10">WELCOME TO OUR WEBSITE</h1>
</div>

<!-- 底部蓝色全屏区块 -->
<div class="h-screen bg-blue-500"></div>

说明：

• 伪元素通过-rotate-2 origin-top-left实现左倾斜，调整rotate值可以改变倾斜角度
• 标题加z-10保证在分隔条上方显示，不会被遮挡
• 这种方法无需裁剪，逻辑更简单，适合快速调整

关键避坑点 #

• 不要直接旋转整个容器，容易导致内容溢出产生水平滚动条
• 优先用裁剪或伪元素实现边界倾斜，保留容器内部元素的正常布局功能
• 用Tailwind内置的transform工具类替代内联样式，保持代码一致性

内容的提问来源于stack exchange，提问作者WildThing