技术求助：实现三个相邻倾斜Div，中间Div双向倾斜适配布局

嘿，我来帮你搞定这个三倾斜Div的布局问题！要实现左右单向倾斜、中间双向倾斜的相邻布局，核心是利用CSS的transform: skew()或者clip-path来处理形状，同时确保内容不会跟着倾斜（避免文字歪掉）。下面给你一个完整的可实现方案：

完整实现代码 #

HTML结构

<div class="skewed-layout">
  <div class="panel panel-left">
    <div class="panel-content">左侧倾斜面板</div>
  </div>
  <div class="panel panel-middle">
    <div class="panel-content">双向倾斜面板</div>
  </div>
  <div class="panel panel-right">
    <div class="panel-content">右侧倾斜面板</div>
  </div>
</div>

CSS样式

/* 基础布局容器，用flex让三个面板并排 */
.skewed-layout {
  display: flex;
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  height: 350px;
  overflow: hidden;
}

/* 通用面板样式 */
.panel {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 防止面板内容溢出 */
  overflow: hidden;
}

/* 用伪元素做倾斜背景，避免内容跟着倾斜 */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: background-color 0.3s ease;
}

/* 左侧面板：右侧倾斜 */
.panel-left::before {
  background-color: #2c3e50;
  /* 向左倾斜10度，调整transform-origin确保衔接自然 */
  transform: skewX(-10deg);
  transform-origin: top right;
  /* 偏移一点避免和中间面板出现缝隙 */
  margin-right: -20px;
}

/* 中间面板：双向倾斜（左右都斜） */
.panel-middle::before {
  background-color: #e74c3c;
  /* 使用clip-path创建左右双向倾斜的形状，数值可调整 */
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

/* 右侧面板：左侧倾斜 */
.panel-right::before {
  background-color: #3498db;
  /* 向右倾斜10度，调整transform-origin确保衔接自然 */
  transform: skewX(10deg);
  transform-origin: top left;
  /* 偏移一点避免和中间面板出现缝隙 */
  margin-left: -20px;
}

/* 面板内容：保持正常不倾斜 */
.panel-content {
  color: white;
  font-size: 1.5rem;
  padding: 2rem;
  text-align: center;
}

关键要点说明 #

• 伪元素分离背景与内容：用::before伪元素做倾斜背景，让内容保持正常排版，避免文字跟着倾斜变形。
• 左侧/右侧面板的倾斜处理：通过transform: skewX()配合transform-origin调整倾斜的基准点，再用负margin消除面板间的缝隙。
• 中间双向倾斜面板：使用clip-path可以更直观地创建左右双向倾斜的形状，polygon()里的数值可以根据需求调整（比如把10%改成8%，倾斜角度会更平缓）。
• 响应式适配：容器用flex布局，面板设置flex:1，可以自动适配不同屏幕宽度，也可以根据需求调整面板的flex比例来改变宽度。

如果你需要调整倾斜角度，只需要修改skewX()的度数或者clip-path的百分比数值就行。试试这个方案，应该能完美适配你的布局需求！

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