html - 具有半透明背景的移位 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%);
}

删除该规范，因为默认背景颜色是透明:

.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 来完成。 :

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

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