如何创建可灵活适配图片数量的老式胶片条形状？

针对你需要的自适应图片数量、右侧圆角形状对齐、带边框区分背景的胶片条效果，推荐以下3种可行方案：

方案1：CSS渐变+伪元素定位 #

通过线性渐变实现左侧重复齿状，右侧圆角突出部分用伪元素固定在容器最右侧，容器宽度随图片数量自动扩展。

代码实现 #

/* 胶片条容器 */
.film-strip {
  display: flex;
  align-items: center;
  height: 120px; /* 可自定义胶片高度 */
  /* 左侧重复齿状背景 */
  background: 
    linear-gradient(to right, 
      #000 20px, transparent 20px, transparent 40px, #000 40px, #000 60px, transparent 60px, transparent 80px, #000 80px),
    #000;
  background-size: 100px 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  padding: 10px 60px 10px 20px; /* 右侧预留圆角部分空间 */
  position: relative;
}

/* 右侧圆角突出部分 */
.film-strip::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 100%;
  background: #000;
  border-radius: 0 25px 25px 0; /* 右侧圆角 */
  border-left: 2px solid #fff; /* 边框区分背景 */
}

/* 图片项 */
.film-item {
  width: 80px;
  height: 100%;
  background: #fff;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="film-strip">
  <div class="film-item">图1</div>
  <div class="film-item">图2</div>
  <!-- 可添加任意数量图片项 -->
</div>

方案2：SVG背景+CSS Grid布局 #

用SVG精确绘制右侧圆角形状和左侧齿状，作为背景配合Grid布局，确保图片排列自适应，右侧形状始终对齐。

代码实现 #

.film-strip {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  padding: 10px 60px 10px 20px;
  /* 左侧重复齿状SVG背景 + 右侧圆角SVG背景 */
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="120"><path d="M0 0h20v120h-20zM40 0h20v120h-20zM80 0h20v120h-20z" fill="#000"/></svg>') repeat-x left center,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="120"><rect x="0" y="0" width="60" height="120" fill="#000"/><rect x="10" y="0" width="50" height="120" fill="#000" rx="25" ry="25"/><line x1="10" y1="0" x2="10" y2="120" stroke="#fff" stroke-width="2"/></svg>') no-repeat right center,
    #000;
  background-size: 100px 100%, 60px 100%, 100% 100%;
  min-height: 120px;
}

.film-item {
  width: 80px;
  height: 100px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="film-strip">
  <div class="film-item">图1</div>
  <div class="film-item">图2</div>
  <div class="film-item">图3</div>
</div>

方案3：CSS Clip-path+伪元素 #

用clip-path定义胶片条左侧齿状缺口，右侧圆角部分用伪元素实现，整体形状连贯，边框效果清晰。

代码实现 #

.film-strip {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin-right: 50px; /* 预留右侧圆角空间 */
  background: #000;
  /* 左侧齿状缺口的clip-path路径 */
  clip-path: polygon(
    0% 0%, 20px 0%, 20px 20px, 40px 20px, 40px 0%, 60px 0%, 60px 20px, 80px 20px, 80px 0%, 
    calc(100% - 50px) 0%, calc(100% - 50px) 80px, 80px 80px, 80px 100%, 60px 100%, 60px 80px, 
    40px 80px, 40px 100%, 20px 100%, 20px 80px, 0% 80px
  );
  position: relative;
}

.film-strip::after {
  content: '';
  position: absolute;
  right: -50px;
  top: 0;
  width: 50px;
  height: 100%;
  background: #000;
  border-radius: 0 25px 25px 0;
  border-left: 2px solid #fff;
}

.film-item {
  width: 80px;
  height: 100px;
  background: #fff;
  margin-right: 20px;
}

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