移动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>

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属性的元素添加修饰内容。默认为内联。

在您的例子中，您不希望在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>