带半透明背景的移动CSS边框

Question

我想要构建一个无限画廊，具有以下布局：期望结果（第一张图片也有边框）。

正如您所看到的，只有当前活动的图片是可见的，并且未激活的图片仅通过其边框指示，容器是半透明的。

现在让这变得有点棘手的是，边框不是一个普通的矩形，而是偏移成了平行四边形。为了实现这一点，我尝试了以下两种方法：

倾斜

我的第一种方法是使用CSS的transform: 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>

- Paul Nelde

---

你如何将一个元素从堆栈顶部移动到底部呢？例如，如果你想使用CSS而不是JS，你可以考虑使用背景图像，并在它不在顶部时替换为全白线性渐变。 - A Haworth

@AHaworth 我已经解决了移动部分。我主要担心的是在图像淡出时使容器不透明，以便仅可见边框。 - Paul Nelde

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伪元素来实现：

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

在您的情况下，您不希望在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>

- Hazel へいぜる

---

就是这个！将倾斜度与剪辑路径的百分比对齐有点棘手。但它是响应式的，因此很好。非常感谢！ - Paul Nelde