如何用CSS3创建特定形状的响应式不规则五边形图片滑块？

要实现带切角和圆角的响应式图片滑块，核心是将clip-path中的固定像素值替换为相对单位或CSS变量，让形状随容器尺寸自动缩放。以下是两种可靠方案：

方案一：使用CSS变量+相对路径 #

这种方案无需额外SVG，直接通过CSS变量控制形状参数，完全响应式：

HTML #

<section>
  <div class="slider-container">
    <!-- 滑块内容，示例用文字占位 -->
    <div class="slider-slide">Slide 1</div>
  </div>
</section>

CSS #

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.slider-container {
  /* 响应式容器：使用宽高比保持形状 */
  width: 90vw;
  aspect-ratio: 16/9; /* 可根据需求调整比例 */
  background: #A490FF;
  overflow: hidden; /* 隐藏超出裁剪区域的内容 */
  
  /* 形状控制变量，可直接修改调整外观 */
  --corner-radius: 30px; /* 圆角半径，可用2vmin实现完全响应式 */
  --cut-x: 20%; /* 底部切角的水平位置（从左算起） */
  --cut-y: 65%; /* 左侧切角的垂直位置（从上算起） */
  --cut-corner-radius: 10px; /* 切角处的圆角半径 */
  
  /* 响应式裁剪路径 */
  clip-path: path('M0 var(--corner-radius) 
                   C0 calc(var(--corner-radius)/2) calc(var(--corner-radius)/2) 0 var(--corner-radius) 0 
                   H calc(100% - var(--corner-radius)) 
                   C calc(100% - calc(var(--corner-radius)/2)) 0 100% calc(var(--corner-radius)/2) 100% var(--corner-radius) 
                   V calc(100% - var(--corner-radius)) 
                   C 100% calc(100% - calc(var(--corner-radius)/2)) calc(100% - calc(var(--corner-radius)/2)) 100% calc(100% - var(--corner-radius)) 100% 
                   H var(--cut-x) 
                   C calc(var(--cut-x) - var(--cut-corner-radius)) 100% calc(var(--cut-x) - var(--cut-corner-radius)) calc(100% - var(--cut-corner-radius)) calc(var(--cut-x) - var(--cut-corner-radius)*2) calc(100% - var(--cut-corner-radius)) 
                   L var(--cut-corner-radius) calc(var(--cut-y) + var(--cut-corner-radius)) 
                   C 0 calc(var(--cut-y) + var(--cut-corner-radius)/2) 0 calc(var(--cut-y) - var(--cut-corner-radius)/2) 0 var(--cut-y) 
                   V var(--corner-radius) Z');
}

.slider-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
}

方案二：使用SVG裁剪路径 #

如果需要更好的浏览器兼容性（尤其是旧版浏览器），可以用SVG定义裁剪形状，利用SVG的天然响应式特性：

HTML #

<section>
  <div class="slider-container">
    <div class="slider-slide">Slide 1</div>
  </div>
</section>

<!-- 隐藏的SVG定义裁剪路径 -->
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="sliderClip" clipPathUnits="objectBoundingBox">
      <!-- 路径坐标为相对值（0-1对应容器的宽高） -->
      <path d="M0,0.05 
               C0,0.022 0.022,0 0.05,0 
               H0.95 
               C0.978,0 1,0.022 1,0.05 
               V0.92 
               C1,0.948 0.978,0.97 0.95,0.97 
               H0.2 
               C0.17,0.97 0.14,0.95 0.12,0.93 
               L0.01,0.67 
               C0,0.66 0,0.64 0,0.62 
               V0.05 Z" />
    </clipPath>
  </defs>
</svg>

CSS #

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.slider-container {
  width: 90vw;
  aspect-ratio: 16/9;
  background: #A490FF;
  overflow: hidden;
  /* 使用SVG裁剪路径 */
  clip-path: url(#sliderClip);
}

.slider-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
}

关键改进点 #

• 替换固定高度为aspect-ratio，确保容器缩放时保持比例
• 使用CSS变量或SVG相对坐标，让裁剪路径随容器尺寸自动调整
• 添加overflow:hidden防止滑块内容超出裁剪区域

内容的提问来源于stack exchange，提问作者dzainr