如何用CSS水平翻转图片？框架左边缘样式修复求助

我明白你的需求啦——顶部梯形已经完美搞定，现在就差把左侧边缘做个水平翻转来匹配整体风格对吧？咱们可以用CSS的transform: scaleX(-1)轻松实现水平镜像，再配合调整clip-path来保证形状精准，下面是完整的可运行示例：

完整代码示例 #

<div class="frame-container">
  <div class="trapezoid-top"></div>
  <div class="trapezoid-left"></div>
</div>

.frame-container {
  position: relative;
  width: 400px;
  height: 400px;
  background: #f0f0f0; /* 背景色方便查看效果 */
}

.trapezoid-top {
  width: 400px;
  height: 100px;
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: contain;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
}

.trapezoid-left {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100px;
  height: 300px;
  background-image: url('https://image.ibb.co/e5Kaw7/image.png');
  background-size: contain;
  background-repeat: no-repeat;
  /* 定义左侧原始垂直梯形的路径 */
  clip-path: polygon(0 0, 100% 100px, 100% calc(100% - 100px), 0 100%);
  /* 执行水平翻转 */
  transform: scaleX(-1);
  /* 调整背景位置，避免翻转后背景错位 */
  background-position: right;
}

关键说明 #

1. 水平翻转核心：transform: scaleX(-1)是实现元素水平镜像最直接的方式，它会沿垂直轴把整个元素翻转过来。
2. Clip-path适配：先定义好左侧原始的垂直梯形路径，翻转后就能得到你需要的边缘形状；如果背景图方向和原始路径匹配，记得用background-position调整背景显示位置，避免翻转后背景偏移。
3. 定位衔接：通过绝对定位把左侧边缘固定在顶部梯形下方的对应位置，保证框架的整体连贯性。

你可以直接把这段代码复制到本地HTML文件运行，或者在代码编辑器里预览，就能看到翻转后的左侧边缘和顶部完美匹配的效果。

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