如何实现带半透明背景的倾斜平行四边形CSS边框 适配无限画廊需求

最优实现方案 #

使用反向skew抵消变形的方案，既能实现平行四边形倾斜边框，又能避免图片扭曲，同时完美支持半透明容器背景、图片渐隐效果，无clip-path方案的假边框缺陷。

核心逻辑：外层容器施加skewX倾斜实现平行四边形外形，内部承载图片的容器施加反向的skewX抵消变形，图片本身不需要做任何变换，原生展示。

完整可运行代码 #

div[class*="wrapper"] {
  height: 100px;
  width: 200px;
  margin: 1em;
  /* 外层容器倾斜 */
  transform: skewX(-25deg);
  border: 1px solid rgba(0,0,0,0.8);
  /* 非激活状态半透背景可自定义 */
  background: rgba(0,0,0,0.2);
  overflow: hidden;
}

.img-container {
  width: 100%;
  height: 100%;
  /* 反向倾斜抵消变形 */
  transform: skewX(25deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  animation: opacity 1s infinite alternate;
}

@keyframes opacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<h1>优化后的Skew方案</h1>
<p>图片无扭曲，图片渐隐时容器为半透明背景</p>
<div class="wrapper-optimized">
  <div class="img-container">
    <img src="https://www2.tuhh.de/zll/wp-content/uploads/placeholder.png">
  </div>
</div>

效果说明 #

1. 边框为原生真实边框，天生是平行四边形，没有clip-path的假边框问题
2. 图片无任何扭曲，展示效果正常
3. 容器背景可直接设置rgba半透明值，图片渐隐时不会出现纯黑背景
4. 激活态只需调整容器背景透明度、边框透明度即可，无需额外修改裁剪规则

内容的提问来源于stack exchange，提问作者d.na