如何为5图预览Image Slider添加斜线分隔而非水平线？

我做了一个支持预览前后图片的5图Image Slider容器，现在需要把图片之间的分隔线从水平线改成斜线。之前尝试用transform: skewX(-20deg)，但会让整个图片变形。预期效果如下：

以下是现有代码：

JavaScript代码 #

const images = document.querySelectorAll(".slider-img")

function clearActiveImage() {
  images.forEach(function(image) {
    image.classList.remove("active-slider");
  });
}

images.forEach(function(image, index) {
  image.onclick = function() {
    event.stopPropagation()
    if (images[index].classList.contains("active-slider")) {
      images[index].classList.remove("active-slider")
    } else {
      clearActiveImage(index)
      images[index].classList.add("active-slider")
    }
  }
})

window.addEventListener("click", () => {
  clearActiveImage()
})

CSS代码 #

.slider-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 150px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-main {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1.5 / 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slider-main:has(.img.active) .img:not(.active) {
  filter: grayscale(100%)
}

.slider-img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: calc(100% / 5);
  object-fit: cover;
  overflow: hidden;
  border: none;
  transition: all 0.4s cubic-bezier(0.32, 0, 0.67, 0);
  cursor: pointer;
}

.active-slider {
  width: 200%;
}

HTML代码 #

<div class="slider-container">
  <div class="slider-main">
    <img class="slider-img active-slider" src="https://image.shutterstock.com/image-photo/mountains-fog-beautiful-night-autumn-260nw-1233564241.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/streelights-uttakleiv-village-shine-below-260nw-2333054447.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/twilight-light-over-isolated-sandwood-260nw-2333055437.jpg" alt="">
    <img class="slider-img" src="https://image.shutterstock.com/image-photo/silhouette-young-traveler-watched-star-260nw-1730791102.jpg" alt="">
  </div>
</div>

解决方案：避免图片变形的斜向分隔线实现 #

直接给图片加skew会导致图片本身变形，我们可以通过给每个图片添加伪元素来实现斜向分隔线，同时保证图片本身不变形。修改CSS如下：

.slider-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 150px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-main {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1.5 / 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* 修正选择器，匹配正确的激活类名 */
.slider-main:has(.slider-img.active-slider) .slider-img:not(.active-slider) {
  filter: grayscale(100%)
}

.slider-img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: calc(100% / 5);
  object-fit: cover;
  overflow: hidden;
  border: none;
  transition: all 0.4s cubic-bezier(0.32, 0, 0.67, 0);
  cursor: pointer;
  /* 设置相对定位，让伪元素基于图片定位 */
  position: relative;
}

/* 给除最后一张外的图片添加斜向分隔线伪元素 */
.slider-img:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  /* 用线性渐变画出斜线分隔效果 */
  background: linear-gradient(to bottom right, transparent 49.5%, #000 50%, #000 50.5%, transparent 51%);
  z-index: 1;
}

.active-slider {
  width: 200%;
}

说明：

1. 伪元素实现分隔线：通过给图片右侧添加伪元素，用线性渐变生成斜线，完全不影响图片本身的形状。
2. 修正选择器：原CSS中选择器与类名不匹配，修正后能正确给未激活图片添加灰度滤镜。
3. 过渡兼容：保留原有过渡动画，斜向分隔线会随图片宽度变化自然适配。

内容的提问来源于stack exchange，提问作者Kreimir Basketball1212 Klari