带有半透明背景的移位 CSS 边框

Question

所以我想用以下布局构建一个无限画廊： Expected result（第一张图也有边框）

如你所见，只有当前活动的图片是可见的，非活动的图片只用边框表示，容器是半透明的。

现在让这有点棘手的是，边框不是常规矩形，而是移动到平行四边形。为了实现这一点，我尝试了以下两种方法：

倾斜

我的第一种方法是只使用 CSS 变换：skewX(deg);

可悲的是，歪斜不仅会移动，还会扭曲图片..

剪辑路径

布局如下

<div class="wrapper">
    <img></img>
</div>

风格：

.wrapper {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background: black;
}
img {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    transform: scale(0.95);
}

我能够以意大利面的方式进入转移的边界。这里的问题是，当图片不再处于活动状态并因此应该不可见时，我的假边框会暴露出来，因为整个容器将是黑色的。

所以我想知道什么是移动容器边框并将图像放在里面的最佳方法，以便它可以淡出并且背景是半透明的。

这是一个代码片段：

div[class*="wrapper"] {
  height: 100px;
  width: 200px;
  margin: 1em;
}

img {
  width: 100%;
  height: 100%;
}

.wrapper-clippath {
  background: black;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.wrapper-clippath img {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  transform: scale(0.985);
  animation: opacity 1s infinite alternate;
 }

.wrapper-skew {
  transform: skewX(-25deg);
  border: 1px solid black;
}

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

<h1>With Skew</h1>
<p>Image gets distorted</p>
<div class="wrapper-skew">
    <img src="https://www2.tuhh.de/zll/wp-content/uploads/placeholder.png">
</div>

<h1>With clippath</h1>
<p>Background is black and not translucent when image is faded out</p>
<div class="wrapper-clippath">
    <img src="https://www2.tuhh.de/zll/wp-content/uploads/placeholder.png">
</div>

Answer 1

TL-DR：简而言之，从包装器中删除 background-color 和 clip-path 规范，并创建一个 ::after 伪元素来放置边框。

---

? 背景颜色

您不应该为了获得边框而指定背景颜色。而不是将背景颜色设置为黑色：

.wrapper-clippath {
  background: black;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

删除该规范，因为默认背景颜色是transparent：

.wrapper-clippath {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

✂️ 删除剪辑

删除包装器上clip-path 的使用：

.wrapper-clippath { }

这里不需要。相反，它应该只在你的 img 上指定，直到你可以证明你的包装器需要它：

.wrapper-clippath img {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  animation: opacity 1s infinite alternate;
}

? 添加边框

由于您需要添加边框，因此应使用border 指定。这可以通过使用:after pseudo-element：

在 CSS 中，::after 创建一个伪元素，它是所选元素的最后一个子元素。它通常用于向具有 content 属性的元素添加装饰性内容。默认是内联的。

在您的情况下，您不需要 content 属性中的任何内容。相反，您想创建一些东西，在您的 clip-path 周围放置一个边框：

.wrapper-clippath::after {
  content: '';
  position: absolute;
  top: 0;
  left: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 2px);
  border: 1px solid black;
  transform: skewX(-25deg);
}

此外，要相对于包装器进行绝对定位，您需要将 wrapper-clippath 类标记为具有相对定位：

.wrapper-clippath { position: relative; }

✔️结果

div[class*="wrapper"] {
  height: 100px;
  width: 200px;
  margin: 1em;
}
img {
  width: 100%;
  height: 100%;
}
.wrapper-clippath {
  position: relative;
}
.wrapper-clippath:after {
  content: '';
  position: absolute;
  top: 0;
  left: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 2px);
  border: 1px solid black;
  transform: skewX(-25deg);
}
.wrapper-clippath img {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  animation: opacity 1s infinite alternate;
}
@keyframes opacity {
  from {
    opacity: 1;
  }
  
   to {
    opacity: 0;
  }
}

<div class="wrapper-clippath">
<img src="https://www2.tuhh.de/zll/wp-content/uploads/placeholder.png">
</div>