如何实现兼容IE11的关联不规则倾斜Div：文字正常居中且无clip-path

针对你需要的两个相连不规则倾斜Div，且内部文字保持正立居中、兼容IE11的需求，我们可以通过CSS Transform的skew属性结合嵌套容器的反向skew来实现，完全不需要clip-path，同时满足响应式要求。下面是具体实现方案：

核心思路 #

• 给外层区块添加skewX()变换实现倾斜效果
• 在每个倾斜区块内部嵌套一个内容容器，用反向的skewX()抵消倾斜，让内部文字恢复正立
• 通过调整区块的位置和外层容器的overflow控制，实现两个区块的无缝衔接
• 用Flex布局或常规的居中技巧确保文字完全居中

完整代码示例 #

<div class="skewed-blocks">
  <div class="block block--left">
    <div class="block__content">
      左侧倾斜区块文字
    </div>
  </div>
  <div class="block block--right">
    <div class="block__content">
      右侧倾斜区块文字
    </div>
  </div>
</div>

/* 外层容器：控制整体布局，隐藏超出部分 */
.skewed-blocks {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 可选，限制最大宽度 */
  margin: 0 auto;
  overflow: hidden;
  display: flex; /* 用Flex实现并排，IE11支持 */
}

/* 基础区块样式 */
.block {
  flex: 1; /* 两个区块平分宽度，响应式自适应 */
  padding: 3rem 1rem; /* 内边距保证文字空间，响应式友好 */
  position: relative;
}

/* 左侧区块：向左倾斜 */
.block--left {
  background-color: #42a5f5;
  transform: skewX(-5deg);
  margin-right: -1%; /* 抵消倾斜后的缝隙，数值根据角度调整 */
}

/* 右侧区块：向右倾斜 */
.block--right {
  background-color: #66bb6a;
  transform: skewX(5deg);
  margin-left: -1%; /* 抵消倾斜后的缝隙，数值根据角度调整 */
}

/* 内容容器：反向倾斜恢复文字正立，同时实现居中 */
.block__content {
  transform: skewX(5deg); /* 左侧区块内容用正5deg，右侧用负5deg */
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  /* 垂直居中：如果区块高度不固定，用Flex更可靠 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 右侧内容容器的反向倾斜要对应调整 */
.block--right .block__content {
  transform: skewX(-5deg);
}

/* IE11兼容微调：确保Flex布局正常，transform无异常 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .skewed-blocks {
    display: -ms-flexbox;
    -ms-flex-pack: center;
  }
  .block {
    -ms-flex: 1;
  }
}

关键细节说明 #

• 倾斜角度调整：你可以修改skewX()的角度值（比如-3deg/3deg），同时对应调整margin-left/margin-right的负值，确保两个区块无缝衔接
• 文字居中：内部的.block__content用Flex布局实现了水平+垂直双居中，即使区块高度变化也能保持文字居中
• 响应式适配：所有宽度用百分比或flex比例，内边距用rem，在移动端会自动适配
• IE11兼容性：IE11完全支持skewX变换和Flex布局（只需添加少量前缀兼容代码），不需要任何现代特性

这个方案完全避开了clip-path，完美兼容IE11，同时满足响应式和文字居中的需求。

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