旋转倾斜元素实现镜像效果失效，无法复刻目标倾斜形状求排查

首先看你给出的代码，发现#slant:before里的position: ab应该是没写完，大概率是position: absolute吧？这是第一个小疏漏。另外，要实现倾斜效果，CSS里的transform: skew()才是核心属性——你目前的代码完全没用到它，这就是为啥做不出倾斜效果的关键原因。

我来一步步帮你修正并实现需求：

1. 先搞定左侧的倾斜元素 #

先完善基础结构，给伪元素加上倾斜变换：

#twrap { 
  height: 50vh; 
  width: 100%; 
  overflow: hidden; /* 防止倾斜元素溢出容器 */
} 

.leftSide, .rightSide { 
  display: inline-block; 
  vertical-align: top; 
  width: 50%; 
  height: 100%; 
  position: relative; /* 让伪元素相对于父容器定位 */
} 

.leftSide { 
  background: black; 
} 

.leftSide #slant:before { 
  content: ''; 
  position: absolute; /* 补全你没写完的定位属性 */
  top: 0;
  right: 0; /* 控制倾斜块靠右侧显示 */
  height: 100%; 
  width: 30%; 
  background: green; 
  transform: skew(-20deg); /* 核心：向左倾斜20度，数值可按需调整 */
  transform-origin: top right; /* 设定倾斜原点为右上角，避免元素溢出 */
}

这样左侧的绿色倾斜块就能正常显示了，transform: skew()的角度可以根据你想要的效果灵活调整，transform-origin能帮你控制倾斜的基准点，避免元素超出父容器范围。

2. 实现右侧的镜像效果 #

要做镜像其实很简单，只需要让右侧的倾斜角度和原点与左侧对应相反，或者用scaleX(-1)翻转元素：

比如右侧的样式可以这么写：

.rightSide {
  background: #eee; /* 给个背景方便区分效果 */
}

.rightSide #slantMirror:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; /* 让倾斜块靠左侧显示 */
  height: 100%;
  width: 30%;
  background: blue; /* 换个颜色区分左右 */
  transform: skew(20deg); /* 用和左侧相反的角度，实现镜像倾斜 */
  transform-origin: top left; /* 设定倾斜原点为左上角 */
}

如果你想直接复用左侧的样式做镜像，也可以用transform: skew(-20deg) scaleX(-1)，但记得同步调整定位和原点，不然元素位置会错乱。

常见问题排查 #

• 之前没实现倾斜，核心原因是没用到transform: skew()——这才是CSS实现元素倾斜的正确方式，靠调整宽高或定位是做不出这种效果的。
• 镜像失败大概率是没搞对transform-origin或者倾斜角度的方向，镜像的关键是让倾斜角度和原点与目标元素对应相反。
• 父容器一定要加position: relative，不然伪元素的绝对定位会相对于整个文档，而不是你想要的父元素，这也是很容易踩的坑。

你把这些代码替换掉原来的部分，再调整倾斜角度和宽高，就能得到你想要的效果啦！

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