如何让Div旋转但内部内容不旋转？斜向叠加布局技术求助

直接用transform: skewX()配合定位就能搞定你要的效果，不用折腾clip-path，给你个现成的实现代码：

HTML结构 #

<div class="skew-container">
  <div class="skew-item item-1">区块1</div>
  <div class="skew-item item-2">区块2</div>
  <div class="skew-item item-3">区块3</div>
</div>

CSS样式 #

.skew-container {
  position: relative;
  width: 80%;
  margin: 50px auto;
  overflow: hidden; /* 切掉倾斜后超出容器的部分 */
}

.skew-item {
  position: relative;
  height: 120px;
  line-height: 120px;
  text-align: center;
  color: #fff;
  margin: 10px 0;
  transform: skewX(-10deg); /* 核心：设置X轴倾斜角度 */
  z-index: 1;
}

/* 调整每个区块的背景色和叠加层级 */
.item-1 {
  background: #2c3e50;
}

.item-2 {
  background: #3498db;
  margin-left: 20px;
  z-index: 2;
}

.item-3 {
  background: #e74c3c;
  margin-left: 40px;
  z-index: 3;
}

/* 如果要让内部文字不跟着倾斜，给文字套个容器反向倾斜 */
.skew-item span {
  display: block;
  transform: skewX(10deg); /* 和父元素倾斜角度相反，抵消倾斜效果 */
}

关键要点说明 #

• 用transform: skewX(-10deg)给每个Div设置倾斜角度，数值可以根据需求调整
• 通过margin-left控制每个区块的偏移量，实现错开叠加的效果
• z-index控制叠加顺序，后面的区块层级更高，能覆盖前面的部分
• 外层容器加overflow: hidden可以把倾斜后超出的部分切掉，保持整体整洁
• 如果不想让内部文字跟着倾斜，给文字单独套个容器，用反向的skewX抵消就行

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