如何用CSS优化实现“Line Dripping”滴落线条效果？

你当前的实现已经能呈现目标效果，但代码存在明显冗余——三个类的样式大部分重复，仅宽度和外边距不同。以下是几种更简洁、易维护的优化方式：

方案1：基础类复用 + CSS自定义属性 #

将重复样式抽离为基础类，通过CSS变量控制差异化的宽度和外边距，大幅减少代码量的同时提升可维护性：

/* 抽离通用基础样式 */
.blue-line {
  position: relative;
  margin: var(--margin-top, 0) auto var(--margin-bottom, 0);
  width: var(--width);
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
}

<div>
  <div class="blue-line" style="--width: 222px; --margin-top: 250px;"></div>
  <div class="blue-line" style="--width: 80px; --margin-top: 150px;"></div>
  <div class="blue-line" style="--width: 30px; --margin-top: 50px; --margin-bottom: 50px;"></div>
</div>

方案2：CSS Grid布局自动控制间距 #

如果需要更灵活的垂直排列，用CSS Grid管理间距，避免手动设置margin：

.line-container {
  display: grid;
  gap: 100px; /* 统一控制线条间的垂直间距 */
  place-items: center;
  margin-top: 250px;
}

.blue-line {
  width: var(--width);
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
}

<div class="line-container">
  <div class="blue-line" style="--width: 222px;"></div>
  <div class="blue-line" style="--width: 80px;"></div>
  <div class="blue-line" style="--width: 30px;"></div>
</div>

方案3：预处理器循环生成样式（项目支持时可选） #

如果项目使用Sass/Less等预处理器，可通过循环批量生成样式，进一步简化代码：

@line-configs: (
  222px: 250px 0,
  80px: 150px 0,
  30px: 50px 50px
);

.blue-line {
  position: relative;
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
  
  @each $width, $margin in @line-configs {
    &-#{index(@line-configs, ($width: $margin))} {
      width: $width;
      margin: $margin auto;
    }
  }
}

HTML部分可保持你原有的结构不变，预处理器会自动生成对应类名的样式。

这些方案核心都是消除重复代码，让样式修改更高效——比如调整渐变颜色、线条高度时，仅需修改一处基础样式即可。

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